css實現旋轉翻牌動畫效果

2024-07-11 09:00:19

字體：大中小

來源：轉載

供稿：網友

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