CSS Rotate Text

借助 CSS，网页上的文本可以被旋转。旋转文本有助于美化网页并吸引访客。有多种方法可以旋转文本。在本文中，我们将学习CSS 旋转文本。

以下是用于在网页上旋转文本的CSS 文本旋转属性：

1. 使用 writing-mode
2. 使用 text-orientation
3. 使用 rotate 属性
4. 使用带有 rotate() 函数值的 transform 属性

让我们逐一学习所有属性。

1. 使用 Writing-mode

第一个属性是使用"writing-mode"。

语法

在上面的语法中，"writing-mode" 是 CSS 属性。此属性有许多值，如下所示：

• Horizontal-tb：当将此值赋给 writing-mode 时，对于从左到右的脚本，文本从左到右水平排列；对于从右到左的脚本，文本从右到左水平排列。
• Vertical-lr：当将此值赋给 "writing-mode" 属性时，对于从左到右的脚本，文本从上到下垂直排列，并将下一行文本放在前一行文本的左侧。对于从右到左的脚本，文本从下到上垂直排列，并将下一行文本放在前一行文本的右侧。
• Vertical-rl：当将此值赋给 "writing-mode" 属性时，对于从左到右的脚本，文本从上到下垂直排列，并将下一行文本放在前一行文本的右侧。对于从右到左的脚本，文本从下到上垂直排列，并将下一行文本放在前一行文本的左侧。
• Sideways-lr：当将此值赋给 "writing-mode" 属性时，对于从左到右的脚本，文本从下到上垂直排列；对于从右到左的脚本，文本从上到下水平排列。它将文本向左移动。
• Sideways-rl：当将此值赋给 "writing-mode" 属性时，对于从左到右的脚本，文本从上到下垂直排列；对于从右到左的脚本，文本从下到上水平排列。它将文本向右移动。
• Inherit：用于继承父级的 CSS writing-mode 属性。
• Initial：用于设置 CSS writing-mode 属性的默认值。

“writing-mode” CSS 属性演示

让我们通过以下示例来检查 "writing-mode" 属性的用法。我们将使用所有 writing-mode 属性值来展示各种文本旋转。

代码

输出

在上面的输出中，我们可以看到 writing-mode 属性的不同值的使用，它们展示了不同的文本旋转。

2. 使用 Text-orientation

第二个属性使用"text orientation"。当设置了 "writing-mode" 属性时，就会使用此属性，这意味着使用 "text-orientation" 属性时，"writing-mode" 属性是必需的。

语法

text-orientation: upright| mixed| sideways| use-glyph-orientation| sideways-right| inherit| initial;

在上面的语法中，"writing-mode" 和 "text-orientation" 是 CSS 属性。 "text-orientation" 属性有多种值，如下所示：

• Upright：此值用于使字符以直立的方式显示，字符不会被旋转。
• Mixed：此值用于将字符顺时针旋转 90 度。
• Sideways：此值仅受 Firefox 浏览器支持。它将字符顺时针旋转 90 度，使其与文本行的方向相同。
• Use-glyph-orientation：此值用于在 SVG 元素中使用已弃用的 SVG 属性 glyph-orientation-horizontal 和 glyph-orientation-vertical。
• Sideways-right：此值的功能与 sideways 值相同，但用于兼容性目的。
• Inherit：用于继承父级的 CSS text-orientation 属性。
• Initial：用于设置 CSS text-orientation 属性的默认值。

“text-orientation” CSS 属性演示

让我们看看使用 text-orientation 属性的演示。

代码

输出

这是输出。我们可以看到 text-orientation 属性的不同值的使用，它们展示了各种文本旋转类型。

3. 使用 Rotate 属性

旋转文本的第三个属性是"rotate" CSS 属性。

语法

在上面的语法中，"rotate" 是 CSS 属性。 "rotate" 属性的值如下所示：

• None：此值为默认值，即自动分配的值。
• Axis：这表示要旋转文本的轴，例如 x 轴、y 轴或 z 轴。如果未指定轴，则默认设置为 z 轴。
• Angle：表示需要将文本旋转到的角度，例如 rad、turn 和 degree。
• Vector-angle：它使用三个数字来旋转文本：x 坐标、y 坐标和 z 坐标。这些数字与角度一起使用，定义了文本需要旋转多少角度。
• Inherit：用于继承父级的 CSS rotate 特性。
• Initial：用于指定 CSS rotate 属性的默认值。

“rotate” CSS 属性演示

我们将在本次演示中理解 "rotate" 属性。

代码

输出

在结果中，可以看到 "rotate" 属性与显示不同文本旋转的不同值的用法。

4. 使用带有 Rotate() 函数值的 Transform 属性

"transform" 是第四个属性，它接受 rotate() 函数作为值。

语法

在上面的语法中可以看到 "transform" 是 CSS 属性。此属性接受的值如下所示：

• None：此值为自动或默认值。
• Rotate (degree) function：这是我们用于旋转文本的 rotate 函数，它接受角度值。

“transform: rotate()” CSS 属性演示

我们将演示如何使用 transform 属性旋转文本。

代码

输出

在下面的结果中，我们可以注意到使用 transform 属性的文本旋转。

浏览器兼容性

以下是支持本文中讨论的所有属性的浏览器列表

• 谷歌浏览器
• 火狐
• Opera
• Internet Explorer
• Safari

结论

在本文中，我们已经了解了CSS 旋转文本。我们已经看到了四种用于旋转文本的 CSS 文本旋转属性，它们是：

• 使用 writing-mode
• 使用 text-orientation
• 使用 rotate 属性
• 使用带有 rotate() 函数值的 transform 属性

我们通过示例很好地理解了每个属性。