CSS Rotate Animation

在本文中，我们将讨论 CSS 旋转动画。我们可以为元素添加动画，使网页看起来引人注目。

CSS 的 "animation" 属性和 "transform" 属性允许我们为 HTML 元素添加动画。

用于旋转 HTML 元素的属性语法

"transform" 是一个 CSS 属性，其值为 rotate(degree)，而 "animation" 是一个 CSS 属性，其值为 rotate、time 和 duration。

CSS 旋转动画演示

让我们通过演示来理解 CSS 旋转动画。

演示 1

在此演示中，我们将旋转 HTML 元素，因此我们可以定义 @keyframes，它用于提供动画。我们将使用 animation 和 transform 属性来旋转 div 元素。

代码

输出

在这里，在下面的输出中，我们可以看到 div 元素。您可以在您的设备上编写代码，以查看 div 元素的实时旋转。

演示 2

在此演示中，我们将演示旋转的圆环。

代码

输出

我们在下面的输出中可以看到圆环，您可以在您的设备上编写代码，以查看圆环的实时旋转。

演示 3

在此插图中，我们将创建两个旋转的球。

代码

输出

在这里，在下面的结果中，我们可以看到两个球。您可以为您自己的设备编写代码，以实时查看两个球的旋转。

演示 4

我们将在本次插图中构建旋转的图像。我们将使用 <image> 标签在网页上添加图像，并借助 rotate() 函数将其顺时针旋转。

代码

输出

我们可以清楚地看到下方提供的输出中的图像。您可以为您自己的设备编写代码，以实时查看图像的旋转。

演示 5

我们将借助 rotate() 函数，逆时针旋转图像。

代码

输出

我们可以在下面的输出中看到图像，您可以在您的设备上编写代码，以查看图像的实时旋转。

演示 6

在此演示中，我们将旋转矩形。

代码

输出

我们在下面的输出中可以看到矩形。您可以为您自己的设备编写代码，以查看矩形的实时旋转。

结论

本文向我们介绍了 CSS 旋转动画。我们可以利用 CSS 的 "animation" 和 "transform" 属性来旋转 HTML 元素。