版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/LoverJuan/article/details/78435539
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>照片墙</title> <style type="text/css"> body { background-color: #000000; } div ul li > img { width: 300px; height: 180px; border: 8px solid #ffffff; } div ul li { list-style-type: none; float: left; } .main { position: relative; top: 100px; left: 400px; margin: 0 auto; } #im1 { transform-origin: 50% 100% ; transform: rotate(-7deg); position: absolute; left: 10px; transition: 0.7s; } #im2 { position: absolute; left: 30px; } #im3 { transform: rotate(7deg); position: absolute; left: 50px; transition: 0.7s; } .main:hover #im1 { transform-origin: 50% 300% ; transform: rotate(-30deg); } .main:hover #im3 { transform-origin: 50% 300% ; transform: rotate(30deg); } </style> </head> <body> <div class="main"> <ul> <li id="im3"><img src="images/3.jpeg"></li> <li id="im2"><img src="images/2.jpeg"></li> <li id="im1"><img src="images/1.jpeg"></li> </ul> </div> </body> </html>