本文的源码已经放在了Github上，感兴趣的可以clone到本地试试，地址如下。
https://github.com/zhouxiongking/article-pages/blob/master/articles/rollPage/rollPage.html
CSS3
首先我们来看看实际的运行效果，动态图如下所示。
效果图
页面剖析在看到上述的效果图后，我们来进行剖析，这个过程是如何实现的。
这个页面我们通过一个ul包含三个li来实现，每个li都给一个固定的宽度和高度。
第一个li在页面上静止不动。
第二个li添加动画效果，使其直接绕Y轴翻转360度。
第三个li添加动画效果，但是翻转周期是在25%的时候开始，因此会有一种翻书的速率差异感。
上面的步骤剖析完后就剩下最主要的一个过程，那便是给外层的ul元素添加perspective属性，这个属性是决定这个动画能不能实现的紧张的成分。
perspectiveperspective是CSS3中新增的属性，表示的是设置某个元素被查看的视角，用于实现3D效果。
须要把稳的是当某个元素设置了perspective属性时，其子元素会得到透视效果，而不是这个元素本身。
我们来看一个大略的例子，有一个section父元素和一个div子元素，让div元素旋转45度，html元素如下。
html元素
其对应的CSS属性如下。
CSS属性
在section元素上，如果不该用perspective的情形下，得到效果如下图所示。
效果图1
如果给section元素加上perspective属性，并设定600px时，得到的效果图如下。
效果图
通过以上两幅图的比拟我们创造，两幅图在Y轴的视角上发生了变革。
接下来，我们来详细看看这个翻书效果的代码实现。
翻书效果HTML代码通过之前的剖析，我们知道这个效果是通过ul与li来实现的，html部分代码如下。
HTML代码
翻书效果CSS代码首先看看ul与li的基本css属性，记住这里须要给ul元素添加perspective属性。
基本CSS属性
然后是给第二个li添加动画。
第二个li的css属性
末了是给第三个li添加动画。
第三个li的css属性
把稳到上面的代码中有个25%和100%的设置，这个和第二个li不同，以是会有一种翻转书页快慢的差异感。
如果按照上述代码来做，即可实现文章开始的翻书动画效果。
结束语本日这篇文章紧张是通过CSS3新增的属性实现了一个翻书动画效果，大家学会了吗？
