css實現(xiàn)旋轉(zhuǎn)翻牌動畫效果
發(fā)布時間：2019-10-09 09:01:19 作者：佚名 
我要評論
我要評論本文通過實例代碼給大家介紹了css實現(xiàn)旋轉(zhuǎn)翻牌動畫效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
css動畫之旋轉(zhuǎn)翻牌效果，具體內(nèi)容如下所示：
1、我們先設(shè)置兩個盒子大小，顏色等等，然后定位重疊在一起，最后再進(jìn)行動畫設(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實現(xiàn)旋轉(zhuǎn)翻牌動畫效果,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這是一款實現(xiàn)js 3D旋轉(zhuǎn)木馬特效插件。該插件通過CSS3和純js來完成，可中間以3D旋轉(zhuǎn)的方式來展示一組圖片，歡迎下載2019-08-16
css3實現(xiàn)橢圓軌跡旋轉(zhuǎn)的示例代碼
這篇文章主要介紹了css3實現(xiàn)橢圓軌跡旋轉(zhuǎn)的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-29微信小程序?qū)崿F(xiàn)可實時改變轉(zhuǎn)速的css3旋轉(zhuǎn)動畫實例代碼
這篇文章主要給大家介紹了關(guān)于微信小程序如何實現(xiàn)可實時改變轉(zhuǎn)速的css3旋轉(zhuǎn)動畫的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值2018-09-11- 本篇文章主要介紹了CSS3打造百度貼吧的3D翻牌效果示例，非常具有實用價值，有想去的可以了解一下。2017-01-04
- 大家應(yīng)該都玩過刮刮樂，如何實現(xiàn)刮刮樂效果，這篇文章主要為大家詳細(xì)介紹了CSS3實現(xiàn)簡易版的刮刮樂效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-27
- 本文給大家分享的是一則使用原生CSS3實現(xiàn)的圖片翻牌效果，十分的炫酷，代碼卻很簡單，這里推薦給有相同需求的小伙伴們。2015-03-10
