css transform 翻頁動畫記錄

翻頁問題場景
B和C是同一頁（正反兩面）
css

當想要翻頁覆蓋 A 時，B、C 須要同時翻頁才能覆蓋A，顯示D。html

B、C 不能寫在同一個盒子裏動畫

錯誤例子：spa

<div class="pagesBox A"></div>
<div class="pagesBox">
  <div class="B"></div>
  <div class="C"></div>
</div>
<div class="pagesBox D"></div>

正確例子：3d

<main>
  <div class="pagesBox A"></div>
  
  <div class="pagesBox B"></div>
  <div class="pagesBox C">
    <div>內容</div>
  </div>

  <div class="pagesBox D"></div>
</main>

爲何不使用一個盒子包裹 B、C，使他們翻轉就能夠了？

答案在下面。code

B 須要設置orm

.B{
  backface-visibility: hidden;
}

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

而且讓 B、C 重疊，使用絕對定位進行重疊。it

C 須要設置io

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

由於正常內容是顯示正面的，咱們須要把 C 的內容翻轉到背面。讓它看起來像是 紙張 的 背面

回到上面的問題，爲何不使用一個盒子

由於包裹 B、C 的盒子進行翻轉時，B 設置背面隱藏是無效的。只有讓 B 進行翻轉，才能讓 B 的背面隱藏,顯示背面的 C。

接着對B、C進行動畫翻頁。

main{
  perspective: 1800;
  transform-style: preserve-3d;
}

.B,.C{
  transition: transform 1s;
  
  &.On{
    transform: rotateY(180deg);
  }
}