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

css transform 翻頁動畫記錄的實現(xiàn)

  發(fā)布時間：2020-12-04 16:20:27   作者：夏哥   我要評論
這篇文章主要介紹了css transform 翻頁動畫記錄的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

翻頁問題場景

B和C是同一頁（正反兩面）

當(dāng)想要翻頁覆蓋 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 需要設(shè)置

.B{
  backface-visibility: hidden;
}

backface-visibility: hidden; 這個屬性是讓B的 背面 隱藏。

并且讓 B、C 重疊，使用絕對定位進(jìn)行重疊。

C 需要設(shè)置

.C > div{
  transform: rotateY(-180deg);
}

因為正常內(nèi)容是顯示正面的，我們需要把 C 的內(nèi)容翻轉(zhuǎn)到背面。讓它看起來像是 紙張 的 背面

回到上面的問題，為什么不使用一個盒子

因為包裹 B、C 的盒子進(jìn)行翻轉(zhuǎn)時，B 設(shè)置背面隱藏是無效的。只有讓 B 進(jìn)行翻轉(zhuǎn)，才能讓 B 的背面隱藏起來。顯示背面的 C。

接著對B、C進(jìn)行動畫翻頁。

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書本翻頁動畫的實現(xiàn)示例

    這是一款十分炫酷的HTML5 3D書本翻頁動畫，效果相對比較簡單，拖拽鼠標(biāo)模擬用手翻頁，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-28

  • 使用純CSS實現(xiàn)書籍3D翻頁效果的示例

    這篇文章主要介紹了使用純CSS實現(xiàn)書籍3D翻頁效果的示例的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-19

  • 很酷的HTML5電子書翻頁動畫特效

    這篇文章主要介紹了很酷的HTML5電子書翻頁動畫特效，這款HTML5翻頁動畫可以用鼠標(biāo)拖動頁面來模擬手動翻頁的效果，也可以點擊書頁的邊框來快速翻頁，感興趣的小伙伴們可以參
    2016-02-25

  • 一個不錯的html 打印代碼支持翻頁

    這篇文章主要介紹了一個不錯的html 打印代碼支持翻頁，非常實用，需要的朋友可以參考下
    2014-09-17

  • css實現(xiàn)點擊滾動翻頁的效果(無js)

    滾動翻頁這樣的效果想必各位在瀏覽網(wǎng)頁的時候都有見過吧，本文將使用純css實現(xiàn)這個效果，不含有任何的輔助代碼，感興趣的朋友可以參考下哈，希望可以幫助到你
    2013-03-22

  • css3實現(xiàn)書本翻頁效果的示例代碼

    這篇文章主要介紹了css3實現(xiàn)書本翻頁效果的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)
    2021-03-08

最新評論