千峰逆战班停课不停学，3周学习实现3D翻书效果

首先，确定一下要写一本几页的书，页数自定义，然后写一个盒子(整本书)，书里面包含单页，我们用列表来做，代码如下:
接下来开始写它的CSS样式。首先，我们要给html中的代码去掉默认样式，例如列表符号等，接着给这个整体的盒子，也就是这本书确定一个宽高，然后在页面居中，由于盒子里面书的单页是固定在里面的，所以我们要给这个整体的盒子加一个相对定位，然后加一个3D的效果，代码如下:
接下来，给书里边的单页li，设置它的宽高，因为和盒子是一个整体，所以它的宽高跟随父容器，绝对定位在父容器中，然后可以给这本书整体设置一个颜色，可以做成渐变的，视觉效果比较好，再给他加上一个边框。咱们平时看书呢都知道，厚一点的书它的右上角和右下角不是直接的直角的，带点圆，所以我们给这个盒子的右上角和右下角可以加一点圆角，值据视角而定。为了让看起来有错落的层次感，可以让盒子整体沿Y轴像外稍微旋转一个适当的角度，再给这本书让它翻页的时候有一个基点，沿着这个点翻转。代码如下:
效果图如下:
接下来，咱们通过伪类标签，给书的每一页设置一个翻页时起点的角度，每一页中间适当的错落开，代码如下:
最后，咱们可以通过hover标签和伪类，让这本书鼠标移上去实现自动翻页，上面咱们写了书翻页时起点的角度，现在咱们给他写一下书翻页之后应该落在哪个角度，这里要注意的是，通常咱们看书，看到最后一页就没有单页再往后翻了，所以咱们的最后一页不需要给它写翻页之后的角度，这个角度写0 就可以了，然后再给每一页后固定一个翻页时画面持续的时间，尽量写成错落的，更真实，代码如下:

效果一下:
最后一步呢，咱们鼠标移上去的时候有一个翻开的时间，也要给它设定一个鼠标移开后书自动合上的时间，咱们可以给书页整体的写一个时间就可以啦。

这就是如何用CSS3 实现一个翻书的3D效果。