通过CSS来实现鼠标悬停时图片旋转

 <div class="image-container">
    <img src="./my-image.jpg" alt="My Image">
  </div>

<style>
.image-container {
  position: relative;
}
.image-container img {
  transition: transform 0.5s ease; /*表示当发生transform变换时，它将花费1秒的时间进行平滑过渡，并采用默认的缓动函数（ease） */
}
.image-container:hover img {
  transform: rotate(360deg);
}
</style>

这里我们首先将包含图像的<div>元素的定位设置为相对（position: relative），以便后面旋转操作的参考点正确。接下来，我们为<img>元素定义一个过渡（transition）效果，使其在旋转时平滑过渡。最后，我们使用:hover伪类选择器来应用旋转效果，当鼠标悬停在<div>元素上时，<img>元素将以顺时针方向旋转360度。