CSS 旋转 180 度

CSS 提供了一种方便的方法来实现元素的旋转。通过旋转，我们可以使元素沿其中心轴旋转，使其更加动态、有趣。

旋转元素

要旋转元素，我们可以使用 CSS 的 transform 属性，并将其设置为 rotate 函数。例如，要将元素旋转 180 度，我们可以像这样：

.element {
  transform: rotate(180deg);
}

上面的 CSS 代码将 .element 元素旋转了 180 度，如图所示：

旋转伪元素

除了旋转元素本身，我们还可以旋转伪元素（例如 ::before 和 ::after）。这可以帮助我们在元素的边缘创建更加复杂的形状，如下所示：

.element::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
  transform: rotate(45deg);
}

这会创建一个带有旋转圆圈的元素，如下所示：

旋转文本

还可以使用 CSS 旋转文本。

例如，要使文本沿中心轴旋转：

.text {
  display: inline-block;
  transform-origin: center;
  transform: rotate(180deg);
}

总结

以上是 CSS 旋转 180 度的简单介绍。通过使用 transform 属性和 rotate 函数，我们可以非常方便地旋转元素和文本。同时，我们还可以利用伪元素来创建更加复杂的形状。