css 图片旋转

作者：√学卟会掩饰发布日期:2025-11-04 浏览:45

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

/* 1. 基本旋转 */
img {
  transition: transform 0.5s ease;
}

img:hover {
  transform: rotate(360deg); /* 当鼠标悬停时，图片会顺时针旋转 360 度 */
}

/* 2. 持续旋转（动画） */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

img.spin {
  animation: spin 2s linear infinite; /* 图片会持续以线性方式旋转，每 2 秒转一圈 */
}

解释说明：

基本旋转：通过 transform: rotate() 可以让图片在鼠标悬停时进行旋转。transition 用于设置旋转的过渡效果，使得旋转更加平滑。
持续旋转：通过 @keyframes 定义了一个名为 spin 的动画，从 0deg 到 360deg 进行旋转。animation 属性可以让图片按照定义的动画持续旋转，infinite 表示无限循环。

如果你想要图片在页面加载时就开始旋转，可以给图片添加 .spin 类。

上一篇：css字体描边

下一篇：css 相对定位