css實現旋轉翻牌動畫效果

  發布時間:2019-10-09 09:01:19   作者:佚名   我要評論
本文通過實例代碼給大家介紹了css實現旋轉翻牌動畫效果,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧

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

總結

以上所述是小編給大家介紹的css實現旋轉翻牌動畫效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

相關文章

  • js+CSS3 3D旋轉木馬特效插件

    這是一款實現js 3D旋轉木馬特效插件。該插件通過CSS3和純js來完成,可中間以3D旋轉的方式來展示一組圖片,歡迎下載
    2019-08-16
  • css3實現橢圓軌跡旋轉的示例代碼

    這篇文章主要介紹了css3實現橢圓軌跡旋轉的示例代碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-29
  • 微信小程序實現可實時改變轉速的css3旋轉動畫實例代碼

    這篇文章主要給大家介紹了關于微信小程序如何實現可實時改變轉速的css3旋轉動畫的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值
    2018-09-11
  • CSS3打造百度貼吧的3D翻牌效果示例

    本篇文章主要介紹了CSS3打造百度貼吧的3D翻牌效果示例,非常具有實用價值,有想去的可以了解一下。
    2017-01-04
  • CSS3實現簡易版的刮刮樂效果

    大家應該都玩過刮刮樂,如何實現刮刮樂效果,這篇文章主要為大家詳細介紹了CSS3實現簡易版的刮刮樂效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-27
  • 純css3實現圖片翻牌特效

    本文給大家分享的是一則使用原生CSS3實現的圖片翻牌效果,十分的炫酷,代碼卻很簡單,這里推薦給有相同需求的小伙伴們。
    2015-03-10

最新評論

码报108