CSS3照片墙制作

​  CSS3照片墙的制作：

1、照片墙制作需求分析

• 每张照片的起始位置不一样
• 每张照片有一定的旋转角度
• 照片阴影及缓慢旋转、缓慢放大

2、css3特效属性
box-shadow:
功能：给元素的边框添加阴影效果
语法：box-shadow:x轴变量 Y轴变量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]

position:
功能：给元素定位，主要用到绝对定位
用法：position: absolute与position:relative配合使用实现相对于参照（包含）元素定位

z-index:
功能：设置元素的上下层显示顺序
用法：z-index:整数 
注意：拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

transform:
功能：使元素变形的属性，其配合rotate(旋转角度)、scale(缩放倍数) 、skew(扭曲元素)等参数一起用
语法：transform:rotate(旋转角度)、transform:scale(缩放倍数)

transition:
功能：设置元素由样式一变为样式二的时间
语法：transition:duration e.g:transition:1.2s

接下来就是一步一步的实现你绚丽的照片墙的制作了

效果如下：../照片墙/index.html