欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css动画之旋转翻牌效果

程序员文章站 2022-07-02 12:46:35
1、我们先设置两个盒子大小,颜色等等,然后定位重叠在一起,最后再进行动画设置 例子如下: 2、效果如下: 恢复内容结束 ......

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动画之旋转翻牌效果

 

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