使用纯CSS3实现的酷炫翻书动画效果

项目中的关键在于几个属性，perspective和rotate,便是透视和旋转perspective属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定body { -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; perspective: 1000px; background-color: #212121; font-family: '微软雅黑'; }preserve-3dtransform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。.preserve-3d { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; }rotate在这个效果中rotate起到了很重要的作用，特别是rotateY，沿着Y轴翻转，你所看到的书本的翻页，便是用animation的@keyframe动画实现rotateY的变化,实现翻页效果跟，也要注意到与transform-origin的配合，因为它是旋转轴，尤其关键。

在线演示        积分下载        6毛下载        砍两刀下载