如何制作翻书效果

来源：懒人之家

我相信在Dw中仿制翻页效果是很多人都看过的，但是怎么样方便简洁的制作一个这样的效果呢！
首先先给大家看一下制作完成之后的效果图片

大家可以看到其实在图片之中其实代码也是有很多重复的 加上首页 一共就是四页 有非常多的相似之处 是依照同一个轨道进行翻页的，
首先看一下源代码里面设计

大家也可以看到在源代码这边的部分 页数的class 已经全部可以看到。

其中大家可以看到在 body 里面有一个：perspective 也就是图中用黑色圈画住的地方 其中一首是指：属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。默认情况下，消失点位于元素的中心，但是可以通过设置perspective-origin属性来改变其位置。
在这个样式的图中不难发现 很多其实都是一样的 源代码 book-page page-front book-page-box preserve-3d 这几句代码都是相同的 在每一页里面都是有的
下面我们来看一下不一样的样式部分
首先是 第一个的

在这个翻页的效果中 @keyframes @-moz-keyframes @-webkit-keyframes @-o-keyframes 其实这四个样式是相同的 然后我也就是只获取了这一部分的代码 这就是第一页了
第二页也是同样的效果但是因为是翻页 在50%的时候就应该适当的增加一点 从原来的-160deg 可以加10的deg 也就是第二页四个 把flipBook 改成flipBook2 就行了 再增加10 把原来的-160deg 改成-150deg 第三页也是同理 在第二页的基础先增加10 也就是140edg
那么到了这里就接近尾声了

大家可以看到这是书封面的代码设置成了蓝色 那么“翻页效果”这四个字变成了白色 其中的 .flip-animation-1 也相当于速度的大小


这两条就是二三了 第四条因为是最后一条并不需要翻页只设置其中的编号P就行了