CSS 动画 ： 3D翻页动画

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>create effect of 3D</title>
    <style>
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      #my3d{
        /* 加入hidden 避免对其他元素造成影响 */
        overflow: hidden;
        perspective: 800px;
        perspective-origin: 50% 50%;
      }
      .page-group{
        width: 400px;
        height: 400px;
        margin: 0 auto;
        position: relative;

        /* 规定渲染 */
        transform-style:preserve-3d;
      }
      .page{
        width: 360px;
        height: 360px;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #333;
        color:#fff;
        font-size: 360px;
        font-weight: bold;
        position: absolute;

        transition: transform 1s linear;
      }
      .page1{
        transform-origin: bottom;
      }
      .page2,.page3,.page4,.page5,.page6{
        transform-origin: bottom;
        transform: rotateX(90deg);
      }

      #op,.think{
        display: grid;
        place-items: center;
      }

    </style>
  </head>
  <body>
    <div id="my3d">
      <div class="page-group">
        <div class="page page1">1</div>
        <div class="page page2">2</div>
        <div class="page page3">3</div>
        <div class="page page4">4</div>
        <div class="page page5">5</div>
        <div class="page page6">6</div>
      </div>
    </div>
    <div id="op">
      <button onclick="next()">next</button> &nbsp;&nbsp;
      <button onclick="previous()">previous</button>
    </div>

    <br><br>
    <hr>
    <br><br>

    <div class="think">
      <h4>思路</h4>
      <br>
      <p>page1一开始铺在屏幕上，其他的页面横向的铺在屏幕里面</p>
    </div>

    <script>
      let curIndex = 1;
      function next(){
        if(curIndex==6){
          return
        }
        let curPage = document.querySelector(".page"+curIndex);
        // 当前页面向前方 90°
        curPage.style.webkitTransform = "rotateX(-90deg)"
        curIndex++
        // 下一个页面向前 90°
        let nextPage = document.querySelector(".page"+curIndex)
        nextPage.style.webkitTransform = "rotateX(0deg)"

      }
      function previous(){
        if(curIndex==1){
          return
        }
        let curPage = document.querySelector(".page"+curIndex);
        // 当前页面向前方 90°
        curPage.style.webkitTransform = "rotateX(90deg)"
        curIndex--
        // 下一个页面向前 90°
        let nextPage = document.querySelector(".page"+curIndex)
        nextPage.style.webkitTransform = "rotateX(0deg)"

      }
    </script>

  </body>
</html>

来自 ： https://www.bilibili.com/video/BV1ei4y137we?p=10