在网页排版中，有时我们需要将文字以卧倒的形态呈现，例如侧边的栏目标题、竖向的水印文字等。所谓卧倒文字，通常是指将原本水平排列的文字旋转一定角度，使其变为纵向或斜向展示。使用CSS可以非常简单地完成这一效果，并不需要依赖图片或JavaScript。
使用transform旋转文字
最常见也是最直接的方式，是利用CSS的transform属性对元素进行旋转。通过rotate()函数，可以让文字容器整体转动，从而实现卧倒效果。
/* 让文字顺时针旋转90度，呈现卧倒状态 */
.side-text {
display: inline-block;
transform: rotate(90deg);
transform-origin: center center;
font-size: 16px;
}
上面的代码将元素旋转了90度。如果希望文字向左卧倒，可以使用rotate(-90deg)。需要注意，旋转后元素在文档流中占据的空间仍是旋转前的盒子大小，可能会造成布局重叠，此时可通过外边距或绝对定位调整位置。
使用writing-mode实现竖排
如果希望汉字按传统方式竖排阅读，而不仅仅是视觉上旋转，可以使用writing-mode属性。
/* 从上到下、从右到左竖排文字 */
.vertical-text {
writing-mode: vertical-rl;
}
这种方式下，英文字母也会竖排，但不会旋转自身，适合中文古风排版或侧边导航。
两种方案对比
| 方式 | 适用场景 | 阅读顺序 |
|---|---|---|
| transform: rotate() | 单纯视觉卧倒、侧边标签 | 保持原顺序，仅角度变化 |
| writing-mode | 竖排阅读、中文排版 | 按书写模式重新排列 |
完整示例
下面是一个将标题卧倒显示在左侧的简单页面示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.box {
position: relative;
width: 200px;
height: 300px;
border: 1px solid #ccc;
}
.side-title {
position: absolute;
left: 0;
top: 50%;
transform: rotate(-90deg) translateX(50%);
transform-origin: left top;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">
<div class="side-title">卧倒标题</div>
</div>
</body>
</html>
通过上述方法，你可以根据实际项目需要选择合适的CSS方式来实现卧倒文字效果，既轻量又易于维护。