CSS 旋转动画

CSS 旋转动画能够通过原生的 CSS 3D 转换实现。你可以使用 transform 属性来进行 3D 转换。 我们可以在 transform 属性中使用 函数 rotate() 来实现旋转动画。

下面是一些关于旋转动画的示例。

制作旋转图片

以下代码片段实现了一个无限旋转的图片：

<img src="http://via.placeholder.com/150x150" class="rotate-image">

.rotate-image {
  animation: spin 1s infinite linear;
}

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

在上面的代码中，我们首先需要定义一个 .rotate-image 类，然后声明 animation 属性。 animation 属性允许我们定义动画，并决定动画的名称，持续时间，时间函数和延迟。 这个例子中我们定义了一个叫做 spin 的动画，动画时间为 1 秒，重复次数为无限，动画按线性时间函数进行，没有延迟。

接下来，我们定义动画的实际变换。 我们使用了 @keyframes 规则，用于定义动画的关键帧，其中“from”表示动画开始的状态，“to”表示动画结束的状态。 在本例中，我们定义状态从 0deg 到 360deg 的变化。

制作旋转盒子

以下代码片段实现了一个无限旋转的盒子：

<div class="rotate-box"></div>

.rotate-box {
  width: 150px;
  height: 150px;
  background-color: #ccc;
  animation: spin 1s infinite linear;
}

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

在这个例子中，我们创建了一个 150px × 150px 的盒子，并把它的背景颜色设为灰色。 然后我们定义了一个 animation 属性，定义了一个叫做 spin 的动画。 这个动画的时间是 1 秒，重复次数为无限，动画按线性时间函数进行，没有延迟。

我们也是使用了 @keyframes 规则，用于定义动画的关键帧。 在本例中，我们定义状态从 0deg 到 360deg 的变化。

反向旋转动画

以下代码片段实现了一个由右往左旋转的无限旋转动画：

<img src="http://via.placeholder.com/150x150" class="rotate-reverse">

.rotate-reverse {
  animation: rotate-reverse 1s infinite linear;
}

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

这个例子中，我们使用了与上面相同的动画类型，但是我们的 rotate 函数设置了 -360deg 的值，以实现一个反向旋转动画的效果。

如上所述，CSS 旋转动画意味着您可以使用 @keyframes 规则来定义动画的关键帧，并使用 transform 属性来旋转元素。 您可以使用不同的 animation 属性来定义动画的属性，例如动画的名称，持续时间，时间函数和延迟。