模拟书本翻页的相册

点击广告查看隐藏内容....

相册

看到别人绚丽的相册，想不想自己拥有一个，下面跟着我创建一个属于自己的相册吧。

浏览

1.利用div将相册所需要的图片装起来

2.接下来就需要通过css来对div进行调整，使得相册更加漂亮

（1）.第一步将所有图片都定位到一起，即所有的图片叠在一起，效果如图所示

（2）.接下来就需要让每一张图片都动起来，也就是最重要的步骤。css如何实现动画自然而然想到了animation;

不过我们的相册需要的是3D效果，因此需要将装图片的div及父级div都需要设置transform-style: preserve-3d;（需要做浏览器兼容），这样设置后就可以达到3D效果。

翻页时都是绕着书的左边旋转的，因此我们还要设置旋转的位置transform-origin: 0% 50%;（需要做浏览器兼容）。

最后就到了animation上场了，为每一张图片容器设置animation，如图所示

设置z-index是为了前面的图片不会被后面的图片遮住，从而达到预定的效果，接下来就是最后一步了，为每一张图片设置如何动，即跟animation配合使用的@keyframes（需要做浏览器兼容）。

不同的图片设置不同的旋转角度，不过后面图片的旋转角度要小于前面图片的旋转角度。

看到这里有没有心动，赶紧自己动手制作一个属于自己的网页相册吧！

点击广告查看隐藏内容....