当前位置: 萬仟网 > IT编程>网页制作>CSS > css动画之旋转翻牌效果

css动画之旋转翻牌效果

2019年10月08日 17:44  | 萬仟网IT编程  | 我要评论

1、我们先设置两个盒子大小,颜色等等,然后定位重叠在一起,最后再进行动画设置

例子如下:

<style>
        .box {
            height: 300px;
            width: 300px;
            position: relative;
        }
        
        .zh,
        .fan {
            height: 300px;
            width: 300px;
            line-height: 300px;
            font-size: 30px;
            text-align: center;
            color: blue;
            transition: all 2s;
            backface-visibility: hidden;
            /* 背面不可见 */
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .zh {
            background-color: aqua;
        }
        
        .fan {
            background-color: aquamarine;
            transform: rotatey(-180deg) rotatez(-180deg);
        }
        
        .box:hover .zh {
            transform: rotatey(180deg) rotatez(180deg)
        }
        
        .box:hover .fan {
            transform: rotatey(0) rotatez(0);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="zh">正面</div>
        <div class="fan">反面</div>

    </div>
</body>

2、效果如下:

 

---恢复内容结束---

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com