亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

css實(shí)現(xiàn)旋轉(zhuǎn)翻牌動(dòng)畫效果

  發(fā)布時(shí)間：2019-10-09 09:01:19   作者：佚名   我要評(píng)論
本文通過實(shí)例代碼給大家介紹了css實(shí)現(xiàn)旋轉(zhuǎn)翻牌動(dòng)畫效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

css動(dòng)畫之旋轉(zhuǎn)翻牌效果，具體內(nèi)容如下所示：

1、我們先設(shè)置兩個(gè)盒子大小，顏色等等，然后定位重疊在一起，最后再進(jìn)行動(dòng)畫設(shè)置

例子如下：

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

總結(jié)

以上所述是小編給大家介紹的css實(shí)現(xiàn)旋轉(zhuǎn)翻牌動(dòng)畫效果,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

相關(guān)文章

最新評(píng)論