<!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; }