css transform 翻页动画记录的实现

<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>内容</div>
  </div>

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

.B{
  backface-visibility: hidden;
}

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

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

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