CSS实例（四）照片墙

　　用CSS3实现照片墙效果比用JavaScript的确简单很多，而且这个效果在很多地方应用也是很好的。

　　首先是HTML的布局

<div class="container">
        <img class="pic pic1" src="images/mm1.jpg">
        <img class="pic pic2" src="images/mm2.jpg">
        <img class="pic pic3" src="images/mm3.jpg">
        <img class="pic pic4" src="images/mm4.jpg">
        <img class="pic pic5" src="images/mm5.jpg">
        <img class="pic pic6" src="images/mm6.jpg">
        <img class="pic pic7" src="images/mm7.jpg">
        <img class="pic pic8" src="images/mm8.jpg">
        <img class="pic pic9" src="images/mm9.jpg">
        <img class="pic pic10" src="images/mm10.jpg">
</div>

　　其次是设置CSS，先给container容器添加一些基本的长宽、边距、定位等属性。

　　接下来就是给所有的img标签添加属性。

.container img{
    padding:10px 10px 15px; 
    background:white; 
    border:1px solid #ddd; 
    box-shadow:2px 2px 3px rgba(50, 50, 50, 0.4);
    -webkit-transition:all 0.5s ease-in;
    -moz-transition:all 0.5s ease-in;
    transition:all 0.5s ease-in; 
    position:absolute; 
    z-index:1;
}

　　最主要的是transition属性，要注意浏览器的兼容性问题。transition 属性是一个简写属性，用于设置四个过渡属性：

　　transition-property、transition-duration、transition-timing-function、transition-delay

　　语法：

transition: property duration timing-function delay;

　　另一个就是z-index属性：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

　　注释：元素可拥有负的 z-index 属性值。Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

　　在这之后，就是给图片设置鼠标移动到图片上之后的效果。

.container img:hover{
    box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); 
    -webkit-transform:rotate(0deg) scale(1.20); 
    -moz-transform:rotate(0deg) scale(1.20); 
    transform:rotate(0deg) scale(1.20); 
    z-index:2;
}

　　transform属性：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

　　语法：

transform: none|transform-functions;

值	描述	测试
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

　　最后一步就是给每个图片设置不同的角度和浮动的位置。

.pic1{
    left: 400px; 
    top: 0; 
    -webkit-transform: rotate(-5deg); 
    -moz-transform: rotate(-5deg); 
    transform: rotate(-5deg);
}

　　这样，用CSS3实现的一个照片墙效果就完成了。