CSS文字旋转90度

在网页设计中，文字的旋转是一种常见的效果，可以使页面更加动感和有趣。其中，文字旋转90度是一种常见的旋转效果，可以使文字沿着垂直方向显示。本文将详细介绍如何使用CSS实现文字旋转90度的效果，希望能够帮助到您。

1. CSS transform属性

CSS中的transform属性可以对元素进行旋转、缩放、平移等变换操作。其中，rotate()函数可以实现旋转效果。通过将元素旋转90度，可以实现文字沿着垂直方向显示的效果。

下面是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS文字旋转90度</title>
<style>
  .rotate-text {
    transform: rotate(90deg);
  }
</style>
</head>
<body>
  <p class="rotate-text">Hello, World!</p>
</body>
</html>

通过上面的代码，我们定义了一个类名为rotate-text的段落元素，并使用CSS的transform属性对其进行旋转90度。在浏览器中打开该HTML文件，可以看到文字已经旋转90度显示。

2. CSS writing-mode属性

除了使用transform属性外，还可以使用writing-mode属性实现文字旋转的效果。writing-mode属性指定了文本的书写模式，通过设置为vertical-rl可以实现文字沿着垂直方向显示的效果。

下面是另一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS文字旋转90度</title>
<style>
  .vertical-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
</style>
</head>
<body>
  <p class="vertical-text">Hello, World!</p>
</body>
</html>

在上面的代码中，我们定义了一个类名为vertical-text的段落元素，并使用CSS的writing-mode属性将文本设置为垂直显示。同时，通过设置text-orientation属性为upright，确保文字保持正立显示。在浏览器中打开该HTML文件，可以看到文字垂直显示的效果。

3. CSS transform-origin属性

在将文字旋转90度时，也可以通过transform-origin属性改变旋转的中心点位置。默认情况下，元素的旋转中心点是其中心位置，可以通过transform-origin属性设置旋转中心点的位置，从而实现更灵活的文字旋转效果。

下面是一个改变旋转中心点位置的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS文字旋转90度</title>
<style>
  .custom-rotate-text {
    transform: rotate(90deg);
    transform-origin: top left;
  }
</style>
</head>
<body>
  <p class="custom-rotate-text">Hello, World!</p>
</body>
</html>

在上面的代码中，我们定义了一个类名为custom-rotate-text的段落元素，并通过设置transform-origin属性为top left，将其旋转中心点设置为左上角位置。在浏览器中打开该HTML文件，可以看到文字绕左上角位置旋转90度的效果。