代码
<!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>