代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>照片墙</title>
<style>
*{
background: #eee;
margin: 0px;
padding: 0px;
position:absolute;
}
.qiang{ width: 960px;
height: 450px;
}
.qiang img{
width: 200px;
margin: 20px 20px 30px;
padding: 15px 15px 30px;
border: solid 1px #fff;
/*边框阴影*/
box-shadow: 5px 5px 8px rgba(50,50,50,0.4);
background-color: #fff;
/*缩放动画效果*/
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.qiang img:hover{
transform:rotate(0deg);
/*角度调整为零，放大1.5倍;*/
-webkit-transform:rotate(0deg) scale(1.5);
z-index: 99;
} .pic1{
transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
}
.pic2{
left: 240px;
-webkit-transform: rotate(7deg);
}
.pic3{
left: 500px;
-webkit-transform: rotate(-11deg);
}
.pic4{
left: 750px;
-webkit-transform: rotate(-13deg);
}
.pic5{
top: 300px;
transform: rotate(-5deg);
-webkit-transform: rotate(-6deg);
}
.pic6{
left: 240px;
top: 300px;
-webkit-transform: rotate(9deg);
}
.pic7{
left: 500px;
top: 300px;
-webkit-transform: rotate(-4deg);
}
.pic8{
left: 750px;
top: 300px;
-webkit-transform: rotate(-6deg);
} </style>
</head>
<body>
<div class="qiang">
<img class="pic1" src="img/1.jpg" />
<img class="pic2" src="img/2.jpg" />
<img class="pic3" src="img/3.jpg" />
<img class="pic4" src="img/4.jpg" />
<img class="pic5" src="img/5.jpg" />
<img class="pic6" src="img/6.jpg" />
<img class="pic7" src="img/7.jpg" />
<img class="pic8" src="img/8.jpg" />
</div>
</body>
</html>