CSS3照片墙的制作

<!DOCTYPE HTML>
<html>
<title>照片</title>
<style>
body {background-color:#eefefe;}
    #container {width:960px; height:360px; margin:50px auto; position:relative;}
img {
position:absolute;
box-shadow:10px 10px 15px #ccc;
z-index:1;
padding:10px 10px 15px;
background:#fff;
border:1px solid #ddd;

transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */

transition-duration: 1s;
-moz-transition-duration: 1s; /* Firefox 4 */
-webkit-transition-duration: 1s; /* Safari 和 Chrome */
-o-transition-duration: 1s; /* Opera */
}
img:hover {
transform:scale(1.2);
-ms-transform:scale(1.2); /* IE 9 */
-moz-transform:scale(1.2); /* Firefox */
-webkit-transform:scale(1.2); /* Safari 和 Chrome */
-o-transform:scale(1.2); /* Opera */
z-index:2;
}

#p01 {top:30px; left:10px;}
#p02 {top:60px; left:50px;}

</style>
<body>
<div id="container">
<img id="p01" src="p01.jpg"></img>
<img id="p02" src="p02.jpg"></img>
</div>
</body>
</html>

你可能感兴趣的:(CSS3照片墙的制作)