HTML原地旋转代码

HTML中的元素可以通过CSS进行定位和变形。现在让我们来探讨如何使用CSS对元素进行旋转动画。

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

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

上面的代码使用了CSS3中的@keyframes规则，用于定义旋转的起始状态和结束状态。同时，我们在.rotate类选择器中定义了动画效果，它将在2秒的时间内以线性的方式，无限次循环地旋转。

在HTML中，我们可以将该类应用于任何元素，使其随着动画旋转。例如，我们可以将其应用于一个图片：

或者是一个文本块：

这是一个旋转的文本块

CSS提供了众多的变形效果，包括旋转、缩放、位移、倾斜等等，这些效果可以为网页增添生动性和活力，让用户的体验更加丰富。