css实现照片墙

@charset “utf-8”;
/全局控制/
*{
margin:0px;
padding:0px;
}

/天空灰色/
body{
background-color:#eeeeee;
}
.container{

width:960px;
height:450px;
margin:60px auto;
position:relative;/*父容器设置relative，字元素设置absolute，可以使得子元素相对父容器定位*/

}

.pic{
width:150px;
}
/照片旋转变大，核心功能是transform和transition/
.container img:hover{
box-shadow:15px 15px 20px rgba(50,50,50,0.4);
transform:rotate(0deg) scale(1.20);
-webkit-transform:rotate(0deg) scale(1.20);
z-index:2;
}
.container img{
padding:10px 10px 15px;
background:white;
border:1px solid #ddd;
box-shadow:2px 2px 3px rgba(50,50,50,0.4);
position:absolute;
z-index:1;
transition:all 0.5s ease-in;
-webkit-transition:all 0.5s ease-in;
}
.pic1{
left: 400px;
top: 0;
transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
}

.pic2{
left: 200px;
top: 0;
transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
}
.pic3{
bottom: 100px;
right: 100px;
transform:rotate(5deg);
-webkit-transform:rotate(5deg);
}

.pic4{
bottom0: 400px;
left: 300;
transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
}

.pic5{
bottom: 0px;
top: 0;
transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
}
.pic6{
left: 0px;
top: 0;
transform:rotate(10deg);
-webkit-transform:rotate(10deg);
}

.pic7{
left: 850px;
top: 0;
transform:rotate(20deg);
-webkit-transform:rotate(20deg);
}
.pic8{
bottom: -20px;
top: 650px;
transform:rotate(5deg);
-webkit-transform:rotate(5deg);
}
.pic9{
left: 550px;
top: 90;
transform:rotate(15deg);
-webkit-transform:rotate(15deg);
}