<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> body{background:#eee;} h1{text-align:center;} .content{width:960px; height:40px; margin:0 auto; position:relative;} img{ padding:10px; background:#fff; border:1px solid #ddd; position:absolute;-webkit-transition:1s; transition:1s ;-moz-transition:1s;} .img_01{ top:10px; left:10px;-webkit-transform:rotate(12deg);-moz-transform:rotate(12deg);transform:rotate(12deg);} .img_02{ top:240px; left:10px;-webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);transform:rotate(25deg);} .img_03{ top:10px; left:230px;-webkit-transform:rotate(35deg);-moz-transform:rotate(35deg);transform:rotate(35deg);} .img_04{ top:10px; left:480px;-webkit-transform:rotate(345deg);-moz-transform:rotate(345deg);transform:rotate(345deg);} .img_05{ top:10px; left:620px;-webkit-transform:rotate(325deg);-moz-transform:rotate(325deg);transform:rotate(325deg);} .img_06{ top:10px; left:880px;-webkit-transform:rotate(305deg);-moz-transform:rotate(305deg);transform:rotate(305deg);} .img_07{ top:245px; left:880px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);} .img_08{ top:245px; left:620px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);} .img_09{ top:245px; left:450px;-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);transform:rotate(5deg);} .img_10{ top:245px; left:200px;-webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);transform:rotate(25deg);} img:hover{ box-shadow:10px 10px 15px #ccc; z-index:2;-webkit-transform:rotate(0deg) scale(1.2);-moz-transform:rotate(0deg) scale(1.2);transform:rotate(0deg) scale(1.2);} </style> </head> <body> <h1>照片墙制作</h1> <div class="content"> <img src="images/1.jpg" width="180" height="190" class="img_01"> <img src="images/2.jpg" width="200" height="200" class="img_02"> <img src="images/3.jpg" width="200" height="270" class="img_03"> <img src="images/4.jpg" width="200" height="300" class="img_04"> <img src="images/5.jpg" width="300" height="200" class="img_05"> <img src="images/6.jpg" width="200" height="200" class="img_06"> <img src="images/7.jpg" width="240" height="250" class="img_07"> <img src="images/8.jpg" width="210" height="340" class="img_08"> <img src="images/9.jpg" width="230" height="260" class="img_09"> <img src="images/10.jpg" width="200" height="200" class="img_10"> </div> </body> </html>