css实现书本翻页动画

<div class="book">  

  <div class="pages">  
    <div class="page page-left"></div>  
    <div class="page page-left"></div>  
    <div class="page page-left nextPage"></div>  
    <div class="page page-right currentPage"></div>  
    <div class="page page-right"></div>  
    <div class="page page-right"></div>  
  </div>  
  <!--页面动态部分-->
  <div class="active-pages">  
    <div class="active-page">  
      <div class="flip1 flip">  
        <div class="flip2 flip">  
          <div class="flip3 flip">  
            <div class="flip4 flip">  
              <div class="flip5 flip">  
                <div class="flip6 flip">  
                  <div class="flip7 flip"></div>  
                </div>  
              </div>  
            </div>  
          </div>  
        </div>  
      </div>  
    </div>  
  </div>  
</div>

body {  
  display: flex;  
  height: 100vh;  
  align-items: center;  
  justify-content: center;  
  flex-direction: column;  
  gap: 32px;  
  background: linear-gradient(to bottom, #e1e6ec 0%, #f0f4f7 100%),  
  linear-gradient(to bottom, #e1e6ec 0%, #f0f4f7 100%);  
  background-blend-mode: normal, color-burn;  
  margin: 0;  
}  
.book {  
  width: 428px;  
  height: 304px;  
  perspective: 500px;  
  perspective-origin: center 200px;  
  position: relative;  
  filter: drop-shadow(2px 4px 6px #ccc);  
}  
.pages,  
.active-pages {  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  transform-style: preserve-3d;  
  transform: rotateX(45deg);  
}  
  
.page {  
  position: absolute;  
  top: 0;  
  width: 210px;  
  height: 300px;  
  border: #cccccc solid 2px;  
  background: #e5e5e5;  
}  
.page-left {  
  left: 0;  
  transform-origin: right;  
}  
.page:nth-child(1) {  
  transform: rotateY(4deg);  
}  
.page:nth-child(2) {  
  transform: rotateY(6deg);  
}  
.page:nth-child(3) {  
  transform: rotateY(8deg);  
}  
.page-right {  
  right: 0;  
  transform-origin: left;  
}  
.page:nth-child(4) {  
  transform: rotateY(-8deg);  
}  
.page:nth-child(5) {  
  transform: rotateY(-6deg);  
}  
.page:nth-child(6) {  
  transform: rotateY(-4deg);  
}  
  
.active-page {  
  position: absolute;  
  top: 0;  
  right: 0;  
  width: 210px;  
  height: 300px;  
  border: transparent solid 2px;  
  border-left-color: #ccc;  
  transform-origin: left;  
  transition: transform 3s;  
  transform: rotateY(-172deg);  
  transform-style: preserve-3d;  
  perspective-origin: center bottom;  
}  
  
.book:hover .active-page {  
  animation: turn1 3s infinite forwards;  
}  
  
.book:hover .flip {  
  animation: turn2 3s infinite forwards;  
}  
  
.flip {  
  position: absolute;  
  width: 30px;  
  height: 100%;  
  left: 30px;  
  transform-origin: left;  
  transform-style: preserve-3d;  
  transform: rotateY(0deg);  
  transition: transform 3s;  
}  
  
.flip1 {  
  left: 0;  
  background: rgb(16, 141, 243);  
}  
.flip2 {  
  background: rgba(199, 232, 166);  
}  
.flip3 {  
  background: rgba(0, 255, 255);  
}  
.flip4 {  
  background: rgb(16, 141, 243);  
}  
.flip5 {  
  background: rgb(236, 11, 198);  
}  
.flip6 {  
  background: rgba(255, 0, 0);  
}  
.flip7{  
  background: rgb(17, 17, 132);  
}  
@keyframes turn1 {  
  0% {  
    transform: rotateY(-172deg);  
  }  
  100% {  
    transform: rotateY(-8deg);  
  }  
}  
@keyframes turn2 {  
  0% {  
    transform: rotateY(0deg);  
  }  
  50% {  
    transform: rotateY(-15deg);  
  }  
  100% {  
    transform: rotateY(0deg);  
  }  
}

pages类是页面的静态部分静态部分，也就是灰色的线框部分

active-page类是页面的动态页，控制页面翻转的整体

嵌套的flip类将翻转的页面分割成一块一块的，并且每一块的旋转是基于父元素的旋转进行的，这是实现翻页动画的关键，并且分割的数量越多，实现的效果越好

当然，上述代码的实现只是演示了翻页动画的实现原理，要完全实现一个翻页动画其实是非常复杂的，下面是一个比较完整的示例 codepen.io/caoguirong/…