前言
翻书，想必大伙都有过。但是如何使用纯 CSS 来实现这样一个效果呢？于是，抱着试一试的心态，使用纯 CSS 做了一个翻书的效果来体验一下。下面是最终效果。
码上掘金
过程分析
现在我们来分析一下这个效果是如何实现的。从效果上猜测，这个翻书少不了动画的帮助，因此我们需要使用到 CSS 动画效果。
我们可以将整个翻书分为以上几个部分：封面 + 内容。然后通过加入 CSS 动画效果让它翻转起来，就可以达到一个翻书效果了。接下来我们便来实现一下它们吧。
封面 + 内容
这一部分就是 HTML 结构的设计了，需要将书的基本结构和样式完成。
<div class="book preserve-3d">
<div class="book-page-box book-page-4 preserve-3d">
<div class="book-page page-front">
<p>第三页</p>
</div>
</div>
<div class="book-page-box book-page-3 preserve-3d flip-animation-3">
<div class="book-page page-front">
<p>第二页</p>
</div>
</div>
<div class="book-page-box book-page-2 preserve-3d flip-animation-2">
<div class="book-page page-front">
<p>第一页</p>
</div>
</div>
<div class="book-page-box book-page-1 preserve-3d flip-animation-1">
<div class="book-page page-front">
<p>
翻页特效
</p>
</div>
</div>
</div>
我们先设置第一个类名为 book 的 div 元素，表示这是一个书本的容器。接下来的四个 div 元素都有一个类名为 book-page-box，表示它们是书本的页面容器，其中包含一个类名为 book-page 的 div 元素，用于显示页面内容。我们需要为每个元素设置多个类名，用于控制翻页动画的序号。
在页面容器里，碰到类名 book-page-XX 表示这是第几页，碰到类名 preserve-3d 表示保持 3D 效果，碰到类名 flip-animation-XX 表示在翻页时会使用第几个动画。
类名一旦多起来，相关样式就会变得复杂，这时候类名的语义化就显得极为重要，因为这样我们就可以通过类名来知道我们的样式是何作用。下面就将介绍相关动画的书写了。
CSS 动画
这里就到了整个过程最关键的部分了 —— CSS 动画。
body, html {
height: 100%;
}
body {
perspective: 1000px;
background-color: #212121;
font-family: '微软雅黑';
}
.book {
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
width: 300px;
height: 300px;
background-color: #fff;
transform: rotateX(30deg);
}
.preserve-3d {
transform-style: preserve-3d;
}
.book-page {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
border: 1px solid #1976D2;
text-align: center;
}
.book-page-box {
transform-origin: 0 50%;
transform: rotateY(0deg);
}
.book-page-1 .page-front {
background-color: #1976D2;
}
.book-page-1 .page-back {
background-color: #fff;
}
.book-page-1 .page-front p {
font-size: 30px;
color: #fff;
margin-top: 100px;
}
.flip-animation-1 {
animation: flipBook1 17s;
}
.book-page-2 .page-back, .book-page-2 .page-front {
background-color: #fff;
}
.book-page-2 .page-front p {
font-size: 30px;
color: #1976D2;
margin-top: 100px;
}
.flip-animation-2 {
animation: flipBook2 13s 2s;
}
.book-page-3 .page-back, .book-page-3 .page-front {
background-color: #fff;
}
.book-page-3 .page-front p {
font-size: 30px;
color: #1976D2;
margin-top: 100px;
}
.flip-animation-3 {
animation: flipBook3 10s 3s;
}
.book-page-4 .page-front p {
font-size: 30px;
color: #1976D2;
margin-top: 100px;
}
整个页面被设置为 100% 高度，并使用 perspective 属性来创建透视效果。perspective 属性指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。
书设置为绝对定位，并在 X 轴上旋转 30 度，同时使用 transform-style 属性来保持 3D 效果。这里的 30 度是怎么体现的？其实就是将整个书往上“ 翘了 ” 30 度。
每一页设置为绝对定位，并在 Y 轴上旋转，使用不同的动画效果来模拟翻页的效果，这里的动画效果后面都会介绍。每一页的正反面都被设置了不同的背景颜色，并在前面的页面上添加了文本。每个页面都有一个独立的类名，用于在 CSS 中定义不同的动画效果。
下面是不同的动画效果代码。这是三个不同的 CSS 动画，每个动画都使用了 @keyframes 规则来定义动画的关键帧。
@keyframes flipBook1 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-160deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook2 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-150deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook3 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-140deg);
}
100% {
transform: rotateY(0deg);
}
}
这里每个动画都有三个关键帧，分别是 0%、50% 和 100%。在每个关键帧中，都定义了一个旋转变换，使元素绕 Y 轴旋转一定角度，这样就实现翻转效果了。其中在我们这段代码中，第一个动画旋转角度为 160 度，第二个动画旋转角度为 150 度，第三个动画旋转角度为 140 度。这里的度数可以自定义，通过这样的旋转来达成翻书的效果。
以上这里所有的代码省略了以 -webkit- 等为前缀的属性，这些前缀的作用是为了兼容旧版本的浏览器，如果想参考更详细的代码，可以进入码上掘金查看。
码上掘金
总结
以上就是整个效果的实现过程了，总的来说就是使用 CSS 动画效果来实现一个这样的简易翻书效果。如果大家还有更好的实现方式的话，欢迎各位在评论区告诉我~
本文正在参加「金石计划」
