CSS 文字旋转90度

在网页设计中，有时候我们希望对文字进行一些特殊的效果处理，比如旋转文字。在本文中，我们将讨论如何使用 CSS 来实现文字旋转90度的效果。

1. transform 属性

在 CSS 中，transform 属性可以对元素进行旋转、缩放、倾斜或平移等变换操作。要实现文字旋转90度的效果，我们可以使用 rotate 旋转函数来达到目的。

.rotate-text {

transform: rotate(90deg);

}

在上面的代码中，我们给一个类名为 rotate-text 的元素设置了 transform: rotate(90deg);，这样就可以让该元素内的文字旋转90度。

2. 示例代码

让我们来看一个简单的示例代码，实现文字旋转90度的效果。

在上面的代码中，我们创建了一个 div 元素，给它设置了 class="rotate-text"，然后在 CSS 样式中对该类名元素应用了 transform: rotate(90deg); 属性，从而实现了文字旋转90度的效果。

3. 运行结果

打开上面代码片段所在的 HTML 文件，会看到一个背景颜色为灰色的矩形区域，内部文字内容为“旋转文字”，文字已经旋转了90度。

4. 总结

通过使用 CSS 的 transform 属性中的 rotate 函数，我们可以很容易地实现文字旋转90度的效果。这样的效果可以在网页设计中增加一些特殊的视觉效果，让页面看起来更加生动和有趣。