<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3照片墙</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<h1>照片墙制作</h1>
<div class="container">
<img src="./img/1.jpg" class="img_1">
<img src="./img/2.jpg" class="img_2">
<img src="./img/3.jpg" class="img_3">
<img src="./img/4.jpg" class="img_4">
<img src="./img/5.jpg" class="img_5">
<img src="./img/6.jpg" class="img_6">
<img src="./img/7.jpg" class="img_7">
</div>
</body>
</html>
body{
padding: 0;
margin: 0;
background: #CEEEFD;
}
h1{
text-align: center;
}
.container{
width: 960px;
height: 500px;
margin: 20px auto;
position: relative;
background: #D7D9F4;
overflow: hidden;
}
img{
width: 350px;
height: 250px;
padding: 5px 5px 10px 5px;
background: white;
position: absolute;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
z-index: 1;
}
.img_1{
top:0px;
left: 220px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
transform: rotate(20deg);
}
.img_2{
top:0px;
left: 20px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.img_3{
top:50px;
right: 40px;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.img_4{
top:50px;
right: 100px;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
.img_5{
top:200px;
left: 300px;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.img_6{
top:200px;
left: 50px;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.img_7{
bottom:50px;
right: 30px;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
img:hover{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 10px 10px 15px gray;
z-index: 2;
}
