CSS旋转效果

0x00 预期效果

  • 效果如下
    CSS旋转效果

0x01 代码实现

  • 思想也比较简单,主要一个特点是监听父容器的事件来决定子容器的状态,这样可以消除抖动的问题;其他的我就不多说了,代码比较简单,大家直接看代码吧。
  • 代码如下
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS旋转效果</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        /*设置外中内三层div的大小一致*/
        .container, .item, .page {
            width: 320px;
            height: 180px;
            line-height: 180px;
            text-align: center;
            font-size: 24px;
        }

        .item {
            /*设置中间层旋转时的动画效果*/
            transition: all .4s ease;
        }

        .page {
            /*配合旋转动画*/
            transition: .4s;
            background-color: goldenrod;
            box-shadow: 4px 2px 4px #999;
        }

        .front {
            opacity: 1;
        }

        .back {
            /*设置位置与正面重合*/
            position: absolute;
            top: 0;
            left: 0;
            /*设置透明 预先旋转180deg*/
            opacity: 0;
            transform: rotateY(180deg);
        }

        .container:hover .item{
            transform: rotateY(180deg);
        }

        .container:hover .front{
            opacity: 0;
        }

        .container:hover .back{
            opacity: 1;
        }
    </style>
    <link rel="manifest" href="./static/manifest.json" />
    <script src="./static/js/sw-server.js"></script>
</head>
<body>

<div class="container">
    <div class="item">
        <div class="page front">这是正面</div>
        <div class="page back">这是反面</div>
    </div>
</div>
</body>
</html>

0x02 完成&总结

  • 我看过好多地方用这种效果,但是基本上都有抖动现象
  • 我的这种实现方式消除了抖动的效果
发布了46 篇原创文章 · 获赞 53 · 访问量 8万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览