CSS 旋转 90 度

CSS 旋转是一种强大的技术，可以帮助您轻松修改元素的外观及其定位方式。在本文中，我们将介绍如何使用 CSS 旋转将元素旋转90度。

使用 transform 属性

CSS transform 属性可以帮助您创建任何元素的 2D 或 3D 转换。其中，您可以使用 rotate() 函数，它可以将元素旋转指定的度数。

下面是一个简单的例子，它将一个文本块旋转90度：

<div class="box">
  这是一段文本。
</div>

<style>
  .box {
    transform: rotate(90deg);
  }
</style>

该样式将使 <div> 元素向左旋转90度，并且文本将被绘制为垂直文本。

借助 transform-origin 属性

CSS transform-origin 属性确定了元素转换的基点。如果未指定 transform-origin，则默认为中心点。您可以使用该属性来更改旋转中心。

下面是一个例子，它将 <div> 元素以左下角为基点向左旋转90度：

<div class="box">
  这是一段文本。
</div>

<style>
  .box {
    transform-origin: left bottom;
    transform: rotate(-90deg);
  }
</style>

借助 transform 和 width 属性

在有些情况下，您可能需要将元素的宽度修改为高度，以便它可以垂直布局。在这种情况下，您可以使用 transform 属性以及 width 和 height 属性来修改元素的外观和位置。

下面是一个例子，它将一个<div>元素旋转90度：

<div class="box">
  这是一段文本。
</div>

<style>
  .box {
    width: 100px;
    height: 200px;
    transform-origin: left bottom;
    transform: rotate(-90deg);
  }
</style>

该样式将使 <div> 元素向上旋转90度，并且它的宽度会变为200px，高度变为100px。

小结

CSS 的旋转功能非常强大。您可以借助这个功能来轻松地修改元素的外观和位置。在本文中，我们讨论了如何使用 CSS 的 transform 属性来旋转一个元素，并且介绍了如何使用 transform-origin 和 width 属性来更改元素的位置和大小。

欢迎大家在评论中分享自己的意见和意见！