几行CSS3代码就能做超炫照片墙

先看看效果（单身狗请做好心理准备）：http://www.yewu233.com/gift/gift.html

我叫掏粪

特效不需要任何JS代码，只需要几个css3属性，分别是

1. transform:rotate(0deg); //旋转角度 90deg就是旋转90度 上面的效果没有旋转但是下面会讲
2. transform:scale(1); //缩放倍数 1即原大小
3. transition:1s; //使对次元素的操作在1s内完成 这样如果缩放的话就会越来越大有动画的效果
4. z-index: 1; //堆叠顺序，数字越大元素越在上层

OK 就这几个，我们用两张图片示范。先看看HTML结构

HTML结构

对于这两个图片，我们要进行绝对定位，然后用transform中的rotate旋转一下，旋转角度不要一样，否则上面的图片把下面的图片全盖住了，我这样对这两个图片进行了修饰。

对两张图片的css设置

然后对img做一点修饰

img的修饰

-webkit-是safari、chrome私有属性，-moz-是火狐的私有属性，这样写是为了兼容浏览器。

然后我们对img标签添加hover属性就行了 在hover下缩放倍数大一点，层数设置大一点，旋转角度改为0度，由于img的transition:1s;属性，它们均会在1s内完成，就变成了动画。

鼠标移上时

为了让图片更有立体感，加了一句box-shadow让它有个阴影。

自己试着用两张图片做一下，很简单的，动动手这个特效就学会了。####

---

我叫掏粪，立志做一名前端工程师的计算机大一男，欢迎萌妹子勾搭我~

新浪微博ID：我叫掏粪i

觉得好的朋友点个赞_(≧▽≦)/