--- theme: devui-blue --- ## 前言翻书，想必大伙都有过。但是如何使用纯 `CSS` 来实现这样一个效果呢？于是，抱着试一试的心态，使用纯 `CSS` 做了一个翻书的效果来体验一下。下面是最终效果。 ## 码上掘金 [jcode](https://code.juejin.cn/pen/7215857990606913594) ## 过程分析现在我们来分析一下这个效果是如何实现的。从效果上猜测，这个翻书少不了动画的帮助，因此我们需要使用到 `CSS` 动画效果。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/96372a3fc1f142ffb14f6a51edbd38eb~tplv-k3u1fbpfcp-watermark.image?) 我们可以将整个翻书分为以上几个部分：**封面 + 内容**。然后通过加入 `CSS` 动画效果让它翻转起来，就可以达到一个翻书效果了。接下来我们便来实现一下它们吧。 ### 封面 + 内容这一部分就是 `HTML` 结构的设计了，需要将书的基本结构和样式完成。 ```

第三页

第二页

第一页

翻页特效

``` 我们先设置第一个类名为 `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** 度。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4f7756a90e264695b734b39498b1de29~tplv-k3u1fbpfcp-watermark.image?) 每一页设置为绝对定位，并在 **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-` 等为前缀的属性，这些前缀的作用是为了兼容旧版本的浏览器，如果想参考更详细的代码，可以进入码上掘金查看。 ## 码上掘金 [jcode](https://code.juejin.cn/pen/7215857990606913594) ## 总结以上就是整个效果的实现过程了，总的来说就是使用 `CSS` 动画效果来实现一个这样的简易翻书效果。如果大家还有更好的实现方式的话，欢迎各位在评论区告诉我~ **本文正在参加[「金石计划」](https://juejin.cn/post/7207698564641996856/ "https://juejin.cn/post/7207698564641996856/")**