[CSSチュートリアル]css transform ページめくりアニメーションの記録

ページめくり問題シナリオ

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>content</div>
  </div>

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

BとCを箱で包んで裏返すようにすればいいのでは？

答えは以下の通りです。

B 設定する必要がある

B{
  backface-visibility: hidden;
}

backface-visibility: hidden; この属性は、B バックフェイス 隠す。

そして、BとCをオーバーラップさせ、オーバーラップのための絶対位置決めを使用します。

Cを設定する必要があります

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);
  }
}

cssの変形ページターンアニメーションのレコードの実装について、この記事はこれに導入され、より関連するcssのページターンアニメーションの内容は、スクリプトホーム以前の記事を検索したり、次の関連記事を閲覧を続けてください、私はあなたが将来的にもっとスクリプトホームをサポートして願っています！.