1 <html lang="en"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title></title> 8 <style> 9 section { 10 width: 120px; 11 height: 163px; 12 margin: 200px auto; 13 /* background-color: aqua; */ 14 position: relative; 15 } 16 17 section img { 18 width: 100%; 19 height: 100%; 20 position: absolute; 21 left: 0; 22 top: 0; 23 transition: all 1s linear; 24 transform-origin: left bottom; 25 } 26 /* section img:hover { 27 transform: rotate(15deg) 28 } */ 29 30 section:hover img:nth-child(1) { 31 transform: rotate(30deg) 32 } 33 34 section:hover img:nth-child(2) { 35 transform: rotate(60deg) 36 } 37 38 section:hover img:nth-child(3) { 39 transform: rotate(90deg) 40 } 41 42 section:hover img:nth-child(4) { 43 transform: rotate(120deg) 44 } 45 46 section:hover img:nth-child(5) { 47 transform: rotate(150deg) 48 } 49 </style> 50 </head> 51 52 <body> 53 <section> 54 <img src="images/1.jpg" alt=""> 55 <img src="images/2.jpg" alt=""> 56 <img src="images/3.jpg" alt=""> 57 <img src="images/4.jpg" alt=""> 58 <img src="images/5.jpg" alt=""> 59 60 </section> 61 </body> 62 63 </html>
