入门 CSS 旋转动画

CSS 可以用来实现许多不同的动画效果，其中之一就是旋转动画。通过 CSS 中的 transform 属性，可以很容易地实现元素的旋转。下面来介绍如何入门 CSS 旋转动画。

前置知识

在了解如何实现旋转动画之前，需要先了解一些前置知识。

transform 属性

transform 属性是 CSS3 中的一个属性，可以用来对元素进行变形操作，包括旋转、缩放、平移等。常见的取值有：

• rotate(deg)：旋转元素 deg 度，可正可负。例如 rotate(90deg) 表示将元素顺时针旋转 90 度。
• scale(x, y)：按比例缩放元素，其中 x 表示水平方向上的缩放比例，y 表示垂直方向上的缩放比例。例如 scale(2, 1) 表示水平方向上放大两倍，垂直方向不变。
• translate(x, y)：移动元素的位置，其中 x 表示水平方向上的移动距离，y 表示垂直方向上的移动距离。例如 translate(100px, 50px) 表示向右移动 100 像素，向下移动 50 像素。

transition 属性

transition 属性可以用来定义元素过渡的效果。常见的取值有：

• transition-property：指定需要过渡的 CSS 属性，多个属性可以用逗号隔开。例如 transition-property: background-color, transform; 表示背景色和变形都需要过渡。
• transition-duration：指定过渡的持续时间，单位为秒或毫秒。例如 transition-duration: 1s; 表示过渡持续 1 秒。
• transition-timing-function：指定过渡的时间函数，可以是线性、缓入缓出等。例如 transition-timing-function: ease-in-out; 表示缓入缓出的时间函数。

实现旋转动画

有了上述知识作为基础，就可以开始实现旋转动画了。下面提供两种方法。

方法一：使用 animation 属性

animation 属性可以用来定义一个动画，包括动画名称、持续时间、过渡效果等。例如：

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

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

上面的代码定义了一个名为 rotate 的动画，从 0 度开始旋转到 360 度。.box 元素应用这个动画，持续时间为 2 秒，时间函数为线性，无限重复执行。这样就实现了一个无限旋转的动画。

方法二：使用 transform 属性和 transition 属性

另一种方法是在 transform 属性上设置初始值和结束值，并在 transition 属性上指定过渡效果和持续时间。例如：

.box {
  transform: rotate(0deg);
  transition: transform 2s linear;
}
.box:hover {
  transform: rotate(360deg);
}

上面的代码实现了当鼠标悬停时元素旋转的效果。初始旋转角度为 0 度，鼠标悬停时旋转角度为 360 度，过渡效果为线性，持续时间为 2 秒。这样就可以实现简单的旋转动画了。

结语

以上就是关于入门 CSS 旋转动画的介绍。CSS 还有许多其他的动画效果，希望大家能够自行学习并掌握。