CSS 文字旋转90度|极客教程

CSS 文字旋转90度

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

1. transform 属性

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

.rotate-text {
    transform: rotate(90deg);
}

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

2. 示例代码

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Rotate Text</title>
<style>
    .rotate-text {
        transform: rotate(90deg);
        background-color: #f0f0f0;
        padding: 10px;
        width: 100px;
        text-align: center;
    }
</style>
</head>
<body>

<div class="rotate-text">旋转文字</div>

</body>
</html>

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