<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .pkBox { width: 155px; height: 219px; position: relative; margin: 300px auto; } .pkBox > img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; /* 添加过渡 */ transition: transform 2s; /* 设置旋转的轴心 */ transform-origin: right top; } /* 添加鼠标的上移效果 */ .pkBox:hover >img:nth-of-type(1){ transform: rotate(60deg); } .pkBox:hover >img:nth-of-type(2){ transform: rotate(120deg); } .pkBox:hover >img:nth-of-type(3){ transform: rotate(180deg); } .pkBox:hover >img:nth-of-type(4){ transform: rotate(240deg); } .pkBox:hover >img:nth-of-type(5){ transform: rotate(300deg); } .pkBox:hover >img:nth-of-type(6){ transform: rotate(360deg); } </style> </head> <body> <div class="pkBox"> <img src="./img/th.jpg" alt=""> <img src="./img/th.jpg" alt=""> <img src="./img/th.jpg" alt=""> <img src="./img/th.jpg" alt=""> <img src="./img/th.jpg" alt=""> <img src="./img/th.jpg" alt=""> </div> </body> </html>