这次分享的代码是实现类似于一种简易照片墙，他能自适应图片大小，拥有点击置前，阴影3D效果，下面来看看具体的。

阿萌先带大家看一看效果图，然后再简介下代码。

（点击效果图片）

（相册效果图，当然，图片位置可以改，大小是自适应图片大小的）

首先介绍下用到的代码，主要由2个：
1、transform：这是为了制造应用 2D 或 3D 转换效果，用到的有旋转和缩放功能。
2、box-shadow：为图片外围增添一层阴影，让画面更有3D层次感。

下面是photo-img.css的代码：

/*css3实现照片墙的样式*/
.containerphoto{width:960px;height:450px;margin:60px auto;position:relative;}
.containerphoto img{position:absolute;padding:10px 10px 15px;background:#fff;border:1px solid #ddd;-webkit-transition:1s ;-moz-transition:1s ;transition:1s ;z-index:1;}
.containerphoto img:hover{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform:scale(1.1);-moz-transform:scale(1.1);transform:scale(1.1);-webkit-box-shadow:5px 5px 5px #ddd;-moz-box-shadow:5px 5px 5px #ddd;box-shadow:5px 5px 5px #ddd;z-index:2;cursor:pointer;}
.pic1{top:0px;left:400px;-webkit-transform:rotate(-5deg);-moz-transform:rotate(-5deg);transform:rotate(-5deg);}
.pic2{top:0px;left:600px;-webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);transform:rotate(-20deg);}
.pic3{bottom:0;right:0;-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);transform:rotate(5deg);}
.pic4{bottom:0;left:300px;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);}
.pic5{bottom:0;left:0;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);}
.pic6{top:0;left:0;-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);transform:rotate(10deg);}
.pic7{top:0;left:850px;-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);transform:rotate(20deg);}
.pic8{bottom:-20px;right:630px;-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);transform:rotate(5deg);}
.pic9{top:90px;left:550px;-webkit-transform:rotate(15deg);-moz-transform:rotate(15deg);transform:rotate(15deg);}
.pic10{left:180px;top:20px;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);}

下面是页面调用的代码，其实就是应用下样式：

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

这个效果虽然简单，也有一段局限性，但是也算是能做出一个不俗的效果，这也要感谢CSS3的功劳。