CSS图片旋转教程：transformrotate与keyframes详解

有志者，事竟成！如果你在学习文章，那么本文《CSS动画实现图片旋转：transform rotate与@keyframes教程》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

使用CSS transform: rotate() 和 @keyframes 可实现图片旋转动画：1. 用 transform: rotate(45deg) 设置静态旋转；2. 通过 @keyframes 定义从0deg到360deg的spin动画；3. 用 animation: spin 2s linear infinite 让图片持续匀速旋转；4. 可设置 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图片旋转教程：transformrotate与keyframes详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！