<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>旋转</title> <style> /* 旋转: transform: rotate(角度) 单位是deg,正值是顺时针旋转,负值是逆时针 默认是沿着Z轴旋转 */ #demo{ width: 252px; height: 300px; border: 1px solid black; margin: 200px auto; } img{ transition: 1s all linear; } #demo:hover img{ transform: rotate(90deg); } </style> </head> <body> <div id="demo"> <img src="../imgs/huge.jpg" alt=""> </div> </body> </html>