--- theme: orange --- ## 基本原理我们先来看一下翻页的过程动图，如下： ![2024-03-04-16-58-36.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/67b7162e491145f0ae0d01c5d04016b0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=993&h=719&s=5884353&e=gif&f=49&b=f3eae9) 观察动图，大致将此翻页过程分为三个状态，书页未翻开、书页翻动中、书页翻动完成，对应的是“图翻页过程”。可以看出，翻页过程中，第二页是压在第一页上的，随着旋转角度增加，覆盖面积逐渐增大，翻页完成时，第二页完全覆盖第一页，据此画出两页的状态，如图“图翻页简析”。 ![翻页.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a3708d6dd3a844198108fc323a6c22f4~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1515&h=1086&s=142740&e=jpg&b=fffafa) 到此，可以用代码先把项目的树形结构先写出来 ```html CSS实现翻页效果

CSS实现翻页效果

Page 1

Page 2

Page 3

``` ## 代码实现观察“图翻页简析”得出page2旋转，page1保持不动，即可基本模拟出翻页效果，运用css的动画效果可以实现page2的连续旋转，而动画的初始状态对应的是“图翻页简析”的①，结束状态则对应③，接下来需要确定的是旋转中心点以及旋转轴，旋转中心点可以是不断变化的，但为了方便，我们取一固定旋转中心点就好，“图翻页简析”中三条辅助线的相交点大致在左下方，可以确定旋转中心点的位置范围。以代码图形大小为基准，画出对应的坐标系以及旋转中心点，如“图旋转示意图”： ![旋转.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/46ed0c1fcb3743abb232db11e299fc77~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=708&h=693&s=49857&e=jpg&b=fffdfd) 在上图中，旋转中心点为点A，旋转轴为线AB，另外，初始旋转角度即∠DAB的大小，记∠ACD为角c，∠DAB=2∠DAC=2(90-∠ACD)=180-2c，由tanc=AD/CD,求出c≈33.7,可得∠DAB=112.6。修改代码，为page2添加旋转动画： ```diff .back { //... left: -300px; transform-origin:300px 600px; transform: rotate(112.6deg); transition: 1s; } article:hover .back{ transform: rotate(0deg); } ``` 考虑到翻页是折角，相当于page1隐藏折角，而page2只显示这一部分折角，page1和page2显示隐藏的划分是线AC，在线AC左边显示，右边隐藏，翻页过程中，线AC也是在旋转的。要实现部分显示功能，css中的overflow:hidden不就可以。想象一下，一个以线AC为边线的盒子套上page1和page2,使得盒子内的内容显示，盒子外则隐藏，那不就能达到我们想要的效果了吗？当然，此父盒子也是要同步旋转的，但是，由于盒子内的元素也会和盒子旋转相同的角度，那我们原定的旋转角度就会因此发生偏移，如下图①： ![调整1.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/750cbb0fbb1547368c44a08cf25fa0ee~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1391&h=1608&s=138318&e=jpg&b=fffbfb) 如上图所示，添加父盒子，设定父盒子的旋转中心点同是点A。偏移的角度即上图③中父盒子的旋转角度，该角和角c为内错角，因此该旋转角度为33.7°。page1和page2只要朝反方向旋转相同的角度就能回复原本位置。编写代码时按照上图步骤一步步进行调整，最终添加父盒子后的代码为： ```diff ``` ## 页面美化最后，为了使效果更为逼真，添加相应的阴影，替换图片进行美化。最终代码： ```html CSS实现翻页效果

CSS实现翻页效果

``` ## 小小改动想要让页面初始状态有个小小的折角，只要设置初始角度>33.7°，以45°为例，需要修改上述代码如下： ```diff ```