css一张图片转动

CSS 可以实现许多有趣的效果，一个常见的例子是将一张图片转动。下面是一个简单的示例，展示如何使用 CSS 使一张图片逆时针旋转：

 .rotate {
    animation: rotate 2s infinite linear;
  }

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

以上代码中，我们首先定义了一个名为“rotate”的 CSS 类。它将应用一个名为“rotate”的动画，并设定持续时间为 2 秒，无限循环，并且使用线性动画。

接着，我们使用 @keyframes 规则来定义实际的旋转效果。这里我们设置起始状态为“0deg”（即图片不旋转），结束状态为“-360deg”（即一圈完整的逆时针旋转）。

最后，我们可以在 HTML 文件中添加一个使用了“rotate”类的标签，如下所示：

 <img src="img.png" class="rotate" alt="旋转的图片"> 

这样一来，我们的图片就会不断地逆时针旋转，直到页面关闭或该标签被移除。