CSS动画：rotate与keyframes实现图片旋转

本文深入浅出地讲解了如何仅用纯CSS实现图片旋转动画——通过基础的`transform: rotate()`设置静态角度，再结合`@keyframes`定义从0deg到360deg的连续旋转关键帧，并利用`animation`属性控制时长、速度曲线和循环行为，轻松打造平滑、高效、无需JavaScript的动态效果；同时补充了`transform-origin`自定义旋转中心、`:hover`触发交互等实用技巧，让加载图标、装饰元素或用户反馈动画既简洁又专业，是前端开发中高频且易上手的视觉增强方案。

想让图片在网页中旋转起来，CSS 提供了简单又强大的方式：结合 transform: rotate() 和 @keyframes。这种方式无需 JavaScript，仅用几行样式就能实现平滑的动画效果。

1. 使用 transform rotate 实现基础旋转

transform: rotate() 可以让元素绕其中心点旋转指定角度。比如让一张图片旋转 45 度：

img {
  transform: rotate(45deg);
}

这里的 deg 是角度单位，90deg 是直角，360deg 表示完整一圈。但这样只是静态旋转，要动起来就得靠 @keyframes。

2. 用 @keyframes 定义旋转动画

@keyframes 用来定义动画的关键帧。你可以设定从开始到结束过程中元素的状态变化。比如创建一个持续旋转的动画：

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

这个动画名为 spin，从 0 度转到 360 度。你也可以写成百分比形式，控制更精细：

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

3. 将动画应用到图片上

定义好动画后，通过 animation 属性将其绑定到图片元素：

img {
  animation: spin 2s linear infinite;
}

• spin：动画名称，对应 @keyframes 定义的名称
• 2s：动画持续 2 秒
• linear：速度曲线为匀速（也可用 ease、ease-in-out 等）
• infinite：无限循环播放

加上这行代码，图片就会持续匀速旋转了。

4. 常见优化与技巧

为了让旋转更顺滑，可以设置元素的变换原点，默认是中心点，但可自定义：

img {
  transform-origin: center center; /* 默认值，也可设为 left top 等 */
  animation: spin 2s linear infinite;
}

如果希望动画加载完再开始，可用 animation-delay；若想鼠标悬停时才旋转，可以结合伪类：

img:hover {
  animation: spin 2s linear infinite;
}

基本上就这些。掌握 transform rotate 和 @keyframes 的配合，就能轻松实现图片旋转动画，无论是加载图标、轮播装饰还是交互反馈都很实用。不复杂但容易忽略细节，比如单位和循环设置。

今天关于《CSS动画：rotate与keyframes实现图片旋转》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！