Implementierung der CSS-Transformation des Seitenumblätter-Animationsdatensatzes

Szenario mit dem Problem des Seitenumblätterns

B und C befinden sich auf derselben Seite (Vorder- und Rückseite)

Wenn Sie die Seite umblättern möchten, um A abzudecken, müssen B und C die Seite gleichzeitig umblättern, um A abzudecken und D anzuzeigen.

B und C können nicht in dasselbe Kästchen geschrieben werden

Falsches Beispiel:

<div Klasse="pagesBox A"></div>
<div Klasse="SeitenBox">
  <div Klasse="B"></div>
  <div Klasse="C"></div>
</div>
<div Klasse="pagesBox D"></div>

Richtiges Beispiel:

<Haupt>
  <div Klasse="pagesBox A"></div>
  
  <div class="pagesBox B"></div>
  <div class="pagesBox C">
    <div>Inhalt</div>
  </div>

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

Warum verwenden Sie nicht eine Schachtel zum Verpacken von B und C und drehen sie einfach um?

Die Antwort finden Sie weiter unten.

B Muss eingestellt werden

.B{
  Rückseitensichtbarkeit: versteckt;
}

backface-visibility: hidden; Diese Eigenschaft versteckt die Rückseite von B.

Und lassen Sie B und C überlappen, indem Sie die absolute Positionierung zum Überlappen verwenden.

C muss eingestellt werden

.C > div{
  transformieren: Y-Drehung (-180 Grad);
}

Da der normale Inhalt auf der Vorderseite angezeigt wird, müssen wir den Inhalt von C auf die Rückseite spiegeln. Lassen Sie es wie die Rückseite des Papiers aussehen

Zurück zur obigen Frage: Warum nicht eine Box verwenden?

Denn wenn die Box mit B und C umgedreht wird, ist die Einstellung B zum Verbergen der Rückseite ungültig. Nur durch Umdrehen von B kann die Rückseite von B verborgen werden. Zeigt das C auf der Rückseite.

Anschließend werden die Seiten B und C animiert umgeblättert.

hauptsächlich{
  Perspektive: 1800;
  Transformationsstil: 3D bewahren;
}

.B,.C{
  Übergang: Transformation 1s;
  
  &.An{
    transformieren: Y-Drehung (180 Grad);
  }
}

Dies ist das Ende dieses Artikels über die Implementierung des CSS-Transformations-Seitenumblätteranimationsdatensatzes. Weitere relevante CSS-Seitenumblätteranimationsinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!