如何仅使用css创建直线并围绕其中心旋转

我是CSS的初学者。我找到了这个答案：。但是我想了解，如果可以只使用CSS而不使用JavaScript来旋转创建的行。

您可以像这样使用CSS：

.line{
显示：内联块；
高度：2倍；
宽度：100px；
利润率：100像素；
背景：#000；
动画：旋转10s线性无限；/*运行旋转10s并再次迭代*/
变换原点：中心；/*从中心旋转*/
}
@关键帧旋转{
从{
变换：旋转（0度）；/*从0度开始*/
}
到{
变换：旋转（360度）/*以360度结束，与0度相同，以创建连续循环*/
}
}

您可以像这样使用CSS：

.line{
显示：内联块；
高度：2倍；
宽度：100px；
利润率：100像素；
背景：#000；
动画：旋转10s线性无限；/*运行旋转10s并再次迭代*/
变换原点：中心；/*从中心旋转*/
}
@关键帧旋转{
从{
变换：旋转（0度）；/*从0度开始*/
}
到{
变换：旋转（360度）/*以360度结束，与0度相同，以创建连续循环*/
}
}

---

您可以使用“变换”旋转到特定位置

transform: rotate(40deg);
transform-origin: center;

对于动画，可以使用

动画

animation: spin 5s infinite;

“旋转”是定义运动的关键帧的名称

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

---

可以使用“变换”旋转到特定位置

transform: rotate(40deg);
transform-origin: center;

对于动画，可以使用

动画

animation: spin 5s infinite;

“旋转”是定义运动的关键帧的名称

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

---

请提供代码，让我们看到您自己在哪里尝试过这样做。请提供代码，让我们看到您自己在哪里尝试过这样做。