如何使用CSS实现图片旋转动画_animation transform rotate技巧

P粉602998670 2025-11-24 00:00:00 次阅读

使用CSS的animation与transform可实现图片旋转动画。1. 通过@keyframes定义从0deg到360deg的spin动画，结合animation: spin 2s linear infinite使图片每2秒匀速转一圈并无限循环；2. 利用:hover配合transition实现鼠标悬停时旋转180deg的交互效果；3. 自定义关键帧如wobble-rotate创建摇摆式旋转，增强视觉提示；4. 注意设置display、transform-origin调整旋转中心，使用will-change提升性能，并在移动端避免过度动画。掌握这些技巧即可灵活控制旋转效果。

想让图片动起来？CSS 的 animation、transform 和 rotate 是实现旋转动画的核心工具。只需要几行代码，就能让图片平滑地持续转动，适用于加载图标、悬停效果或视觉装饰。

1. 基础旋转动画：无限循环转圈

使用 @keyframes 定义旋转过程，再通过 animation 应用到图片上。

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate-img {
  animation: spin 2s linear infinite;
}

将这个类应用到 img 标签：

@@##@@

这段代码会让图片每 2 秒完成一次完整旋转，并持续不断重复。

2. 鼠标悬停触发旋转

不想一直转？可以用 :hover 实现交互式旋转。

.rotate-on-hover {
  transition: transform 0.6s ease;
}

.rotate-on-hover:hover {
  transform: rotate(180deg);
}

鼠标移上去时，图片会缓慢转半圈，移开后恢复原位。调整 rotate() 的角度和 transition 时间可控制效果。

3. 自定义旋转路径与节奏

除了匀速转圈，还能定义更复杂的旋转行为。

@keyframes wobble-rotate {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.wobble {
  animation: wobble-rotate 1.5s ease-in-out infinite;
}