Implementation of css transform page turning animation record

Page turning problem scenario

B and C are on the same page (front and back)

When you want to turn the page to cover A, B and C need to turn the page at the same time to cover A and display D.

B and C cannot be written in the same box

Wrong example:

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

Correct example:

<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>

Why not use a box to wrap B and C and just flip them over?

The answer is below.

B Need to set

.B{
  backface-visibility: hidden;
}

backface-visibility: hidden; This property makes the back of B hidden .

And let B and C overlap, using absolute positioning to overlap.

C needs to be set

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

Because the normal content is displayed on the front side, we need to flip the content of C to the back side. Make it look like the back of the paper

Back to the question above, why not use a box

Because when the box containing B and C is turned over, setting B to hide the back is invalid. Only by turning B over can the back of B be hidden. Showing the C on the back.

Then, the pages of B and C are turned with animation.

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

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

This is the end of this article about the implementation of CSS transform page turning animation record. For more relevant CSS page turning animation content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!