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