教你如何一秒钟学会翻书动画相册

	多余的话就不说了，让我们直奔主题。

第一步：
先准备好你要做的相册的照片，然后把图片都放在一个文件夹里，最好加上顺序，防止错乱。
然后我们在这个文件夹里创建一个html文件，然后把布局先写好，就像下面这样，你准备做几页的相册，这里就写几个li标签。


第二步：
我们去除网页的基础样式，同时给我们的相册设置好大小。看你想做一个多大的相册，就可以设置多大，可以根据自己的照片大小来设置。

第三步：
刚才我们简单设置好了宽高，但是这个宽高是设置给ul标签的，我们的照片是放在li标签里，所以我们要给li标签设置100%宽高，让他占满父容器的宽和高。

然后我们要让所有的li在一个地方，大家可以想一下书的页面，本来几乎就在一个地方，慢慢翻开，所以我们要给li加一个绝对定位，都定位在一个地方，然后让每一个li的转动角度稍稍不同，这样我们的书就有了厚度。这里用：nth-of-type（）选择器做比较方便。


同时，我们这是要做一个翻书的动画，同时要能展示出来照片，所以我们的li肯定是一个斜的面，那li就必须要绕着X轴旋转一个角度，大家可以想一下就是你站在原地向后倒。
但是此时我们的网页是2D的，所以这时候就需要给父容器加一个3D场景以及景深。这样才能看出来3D的效果。
这里我们顺便附上用的几个代码：
transform-style：preserve-3d ； 给块元素设置一个3D空间。
perspective(景深) : 离屏幕多远的距离去观察元素，值越大幅度越小。这里我们设置了500px。
transform：rotateX（？deg）； 块元素绕着X轴转动？度，deg是角度的单位。朝第一象限转动为正值。
position: absolute; 绝对定位，后面加上 left： ； top： ； bottom： ; right: ; 取值。

第四步：
现在我们要做的事就很简单了，就是让你鼠标移上去的时候让这本书一页一页翻动，所以我们要给li加一个**：hover**，然后让他绕着Y轴转动180度，但是书是一页一页翻的，所以我们要给每一个li分别加时间。这里就又要用我们的**：nth-of-type（）选择器。

同时呢，书也是都绕着左边一个边或者右边一个边转的，所以这里我们要设置旋转基点**：
transform-origin: left;
设置好之后我们给每一个li放入图片，图片大小我们可以在PS里设置到我们的li一样大小。
这样简单的 效果就出来了。
图片我这里就不插入了，很简单。如果还想修饰一下相册，可以给相册加上阴影，在来一个倒影，倒影做一个渐变，出来的效果就非常好了，这里给大家看一下，我加个背景色和渐变的翻书代码以及效果。



如何，是不是还不错呢，快给你们女朋友去制作一个吧，下期教大家更加精彩的。