css transform 翻頁動畫記錄的實現(xiàn)
發(fā)布時間：2020-12-04 16:20:27 作者：夏哥 
我要評論
我要評論這篇文章主要介紹了css transform 翻頁動畫記錄的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
翻頁問題場景
B和C是同一頁（正反兩面）
當想要翻頁覆蓋 A 時，B、C 需要同時翻頁才能覆蓋A，顯示D。
B、C 不能寫在同一個盒子里
錯誤例子：
<div class="pagesBox A"></div> <div class="pagesBox"> <div class="B"></div> <div class="C"></div> </div> <div class="pagesBox D"></div>
正確例子：
<main>
<div class="pagesBox A"></div>
<div class="pagesBox B"></div>
<div class="pagesBox C">
<div>內(nèi)容</div>
</div>
<div class="pagesBox D"></div>
</main>
為什么不使用一個盒子包裹 B、C，使他們翻轉(zhuǎn)就可以了？
答案在下面。
B 需要設置
.B{
backface-visibility: hidden;
}
backface-visibility: hidden; 這個屬性是讓B的 背面 隱藏。
并且讓 B、C 重疊，使用絕對定位進行重疊。
C 需要設置
.C > div{
transform: rotateY(-180deg);
}
因為正常內(nèi)容是顯示正面的，我們需要把 C 的內(nèi)容翻轉(zhuǎn)到背面。讓它看起來像是 紙張 的 背面
回到上面的問題，為什么不使用一個盒子
因為包裹 B、C 的盒子進行翻轉(zhuǎn)時，B 設置背面隱藏是無效的。只有讓 B 進行翻轉(zhuǎn)，才能讓 B 的背面隱藏起來。顯示背面的 C。
接著對B、C進行動畫翻頁。
main{
perspective: 1800;
transform-style: preserve-3d;
}
.B,.C{
transition: transform 1s;
&.On{
transform: rotateY(180deg);
}
}
到此這篇關(guān)于css transform 翻頁動畫記錄的實現(xiàn)的文章就介紹到這了,更多相關(guān)css翻頁動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這是一款十分炫酷的HTML5 3D書本翻頁動畫，效果相對比較簡單，拖拽鼠標模擬用手翻頁，需要的朋友們下面隨著小編來一起學習學習吧2019-08-28
這篇文章主要介紹了使用純CSS實現(xiàn)書籍3D翻頁效果的示例的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-19- 這篇文章主要介紹了很酷的HTML5電子書翻頁動畫特效，這款HTML5翻頁動畫可以用鼠標拖動頁面來模擬手動翻頁的效果，也可以點擊書頁的邊框來快速翻頁，感興趣的小伙伴們可以參2016-02-25
- 這篇文章主要介紹了一個不錯的html 打印代碼支持翻頁，非常實用，需要的朋友可以參考下2014-09-17
- 滾動翻頁這樣的效果想必各位在瀏覽網(wǎng)頁的時候都有見過吧，本文將使用純css實現(xiàn)這個效果，不含有任何的輔助代碼，感興趣的朋友可以參考下哈，希望可以幫助到你2013-03-22
- 這篇文章主要介紹了css3實現(xiàn)書本翻頁效果的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習2021-03-08
