css图片旋转

作者：亡梦发布日期:2025-10-15 浏览:43

/* 使用 CSS 实现图片旋转效果 */

/* 定义一个类，用于控制图片的旋转 */
.rotate-image {
  transition: transform 0.5s ease;
}

/* 当鼠标悬停在图片上时，触发旋转效果 */
.rotate-image:hover {
  transform: rotate(360deg);
}

解释说明：

.rotate-image 类：这个类定义了一个过渡效果 (transition)，使得当 transform 属性发生变化时（例如旋转），会在 0.5 秒内平滑地完成动画。
:hover 伪类：当用户将鼠标悬停在应用了 .rotate-image 类的元素上时，会触发 transform: rotate(360deg);，使图片顺时针旋转 360 度。

你可以将这个类应用到任何图片上，比如：

<img src="your-image-url.jpg" class="rotate-image" alt="Rotating Image">

这样，当你将鼠标悬停在图片上时，图片将会平滑地旋转一圈。

上一篇：css左右居中

下一篇：css 两行省略