css动画之旋转翻牌效果

Posted 2023-01-04 qxz17760485467

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css动画之旋转翻牌效果相关的知识，希望对你有一定的参考价值。

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、效果如下：

技术图片

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

以上是关于css动画之旋转翻牌效果的主要内容，如果未能解决你的问题，请参考以下文章