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