迹忆客 专注技术分享

在本文中，我们将使用 CSS 来旋转 HTML 文本。 许多语言（例如中文、日语或韩语）经常使用旋转文本。

此外，在设计网页时，开发人员可能需要将文本旋转一定程度以使用户界面更具吸引力。 在这里，我们使用了两种不同的方法来旋转文本。

使用 CSS transform 属性旋转文本

在下面的示例中，我们创建了 div 元素并为其指定了元素文本类名称以供识别。 在 div 元素内，我们创建了 元素并在其中添加了文本。

示例代码：

<div class="example-text">
    <span>Rotated texts.</span>
</div>

现在，为了旋转 <div> 元素的所有文本，我们使用 CSS 中的类名访问了 div。

接下来，我们将 transform: rotate(-90deg) CSS 属性应用于 div 元素以旋转整个内容。 但是，我们使用了 -webkit-transform: rotate(-90deg); 要在 Chrome 浏览器中旋转文本，-moz-transform: rotate(-90deg); 在 Firefox 浏览器中旋转文本，与 -o-transform: rotate(-90deg); 在 Opera 相同。

此外，我们还应用了一些额外的 CSS 来将 div 元素的位置设置在顶部。 在这里，Position: absolute 表示 div 元素的位置将相对于其父元素（即文档主体本身）发生变化。

.example-text {
    -webkit-transform: rotate(-80deg);
    -moz-transform: rotate(-80deg);
    -o-transform: rotate(-80deg);
    position: absolute;
    top: 40px;
}

在下面的输出中，用户可以看到文本逆时针旋转了 90 度。

如果我们将正度数作为参数传递给 rotate() 方法，它会按顺时针方向旋转内容或文本，用户可以通过下面的示例了解这一点。

.example-text {
    -webkit-transform: rotate(80deg);
    -moz-transform: rotate(80deg);
    -o-transform: rotate(80deg);
    position: absolute;
    top: 40px;
}
<div class="example-text">
    <span>Rotated texts.</span>
</div>

使用 CSS writing-mode 属性旋转文本

writing-mode CSS 属性帮助我们改变文本的方向。 使用它，我们可以将文本旋转 90 或 -90 度。

我们可以使用 verticle-rl 作为 writing-mode 属性的值来旋转文本，这样用户就可以从右到左、从上到下阅读文本。

在下面的示例中，我们创建了 <p> HTML 标记，其中包含一些我们使用 writing-mode:vertical-rl CSS 属性旋转的文本。

示例代码：

<p class="text">These text rotated by writing-mode: vertical-rl; CSS property. Read it from top to bottom and left to right.</p>
.text{
    writing-mode: vertical-rl;
    height: 200px;
}

如果我们使用 verticle-lr 作为 writing-mode 属性的值，它会旋转文本，使文本可以从左到右、从上到下阅读。

.text{
    writing-mode: vertical-lr;
    height: 200px;
}
<p class="text">These text rotated by writing-mode: vertical-rl; CSS property. Read it from top to bottom and left to right.</p>

上面的输出让用户可以从左到右、从上到下阅读文本。

我们已经学习了旋转文本的不同方法。 第一种方法允许程序员将文本旋转任意度数。

使用第二种方法，程序员可以将文本旋转 90 度，使其可从左到右或从右到左阅读。 所以，推荐使用第一种方法。