css3实现翻牌特效（翻转）

最新推荐文章于 2024-10-08 11:32:20 发布

Blooming_x

最新推荐文章于 2024-10-08 11:32:20 发布

阅读量1.2k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/Blooming_x/article/details/119145921

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

重点：1.transform-style: preserve-3d; /*让转换的子元素保留3D转换*/

2.反面的图片需要给它先旋转180度，不然动画的时候，就是反的。

     .container {
            position: relative;
            width: 300px;
            height: 300px;
            perspective: 300px;
            transition: transform .6s ease;  /*过渡*/
            transform-style: preserve-3d; /*让转换的子元素保留3D转换*/
        }
        .container .item {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .container .front {
            transform: rotateY(0deg);
            z-index: 2;
        }
        .container .back {
            transform: rotateY(180deg);
            z-index: 1;
        }
        /*旋转动画*/
        .container:hover {
            transform: rotateY(-180deg);
        }

html

<div class="container">
        <div class="item front " style="background-color: red;">正面</div>
        <div class="item back" style="background-color: blue;">反面</div>
    </div>