使用CSS3做一个飘动的照片效果

这个照片飘动的效果，最早是在我的婚纱电子相册中看到了，本来以为是要像AE这种专业制作特效的视频软件才能做，后来发现，其实CSS3也能简单制作出来。
先来看下CSS3做出来的效果：

其实做起来不难，只是有几个地方需要注意下，不然你会发现效果无法出现。
主要用到下面几个属性：
1、perspective，设置元素被查看位置的视图
2、transform，对元素进行旋转、缩放、移动或倾斜
3、animation，设置元素动画

一、设置perspective

目前浏览器都不支持 perspective 属性。
Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
这里就是第一个要注意的地方了，需要使用-webkit-perspective才能达到想要的效果。
-webkit-perspective属性是对其子元素起作用，使子元素会获得透视效果。所以我们要在img外层加上一层div来设置这个属性。

<style>