CSS変換ページめくりアニメーションレコードの実装

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

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>

正しい例:

<メイン>
  <div class="pagesBox A"></div>
  
  <div class="pagesBox B"></div>
  <div class="pagesBox C">
    <div>コンテンツ</div>
  </div>

  <div class="pagesBox D"></div>
</メイン>

B と C を箱で包んで、裏返してみませんか?

答えは以下の通りです。

B 設定が必要

.B{
  背面の可視性: 非表示;
}

backface-visibility: hidden; このプロパティは、B の背面を非表示にします。

そして、絶対位置指定を使用して、B と C を重ね合わせます。

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

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

通常の内容は前面に表示されるため、C の内容を背面に反転する必要があります。紙の裏のように見えるようにする

上の質問に戻ると、なぜ箱を使わないのか

BとCが入った箱を裏返したときに、裏面を隠すようにBを設定するのは無効だからです。 Bを裏返すことによってのみ、Bの裏側を隠すことができます。背面にCを表示。

すると、BとCのページがアニメーションでめくられます。

主要{
  視点：1800年;
  変換スタイル: 3D を保持します。
}

。紀元前{
  遷移: 1 秒を変換します。
  
  ＆。の上{
    変換: rotateY(180deg);
  }
}

CSS 変換ページめくりアニメーション レコードの実装に関するこの記事はこれで終わりです。より関連性の高い CSS ページめくりアニメーション コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。