如何使用 HTML 和 CSS 在悬停时将文本旋转 360 度？

在 HTML 和 CSS 中，我们可以使用 transform 属性来控制元素的位置、大小、旋转等。如果想要在悬停时将文本旋转 360 度，可按以下步骤操作：

1. 在 HTML 中，创建一个带有文本的元素。例如，可以使用以下代码创建一个包含 "Hover me" 文本的 div 元素：

<div class="rotate-text">Hover me</div>

2. 在 CSS 中，为该元素添加样式，并使用 transform 属性将其进行旋转。例如，可以使用以下代码为前面创建的元素添加样式：

.rotate-text {
  font-size: 36px;
  text-align: center;
  width: 200px;
  height: 200px;
  background-color: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
  transition-duration: 0.6s;
}

.rotate-text:hover {
  transform: rotate(360deg);
}

3. 解释：

• 在这个例子中，我们创建了一个名为 "rotate-text" 的 CSS 类，这个类在 HTML 中的 div 元素中使用。
• 我们设置一些样式属相，例如字体大小、背景颜色、宽度、高度等。
• 使用 display: flex; 和 justify-content: center; align-items: center; 可以让文本垂直居中对齐。
• 使用 transition-duration: 0.6s; 设置悬停时转换动画的持续时间。
• 鼠标悬停时，使用 transform: rotate(360deg); 将元素旋转 360 度。

最终，当鼠标悬停在这个 div 元素上时，其中的文本将会以 360 度的方式旋转。

请注意，这只是一个简单的例子，你可以根据自己的需求进行更改和扩展。