在网页布局中，有时需要将某个div容器里的文字变成竖排并且整体向左旋转九十度，例如左侧导航的标题或者某些特殊报表的表头。很多初学者第一反应是调整文字书写方向，但实际上字符的朝向和文本流的走向是两个独立维度，只有搞清楚这一点才能写出稳定的样式。
理解文字排版与旋转的本质区别
CSS里控制文本走向的属性主要是writing-mode，它决定块级元素里行内内容是从上往下、从右往左还是横向排列。比如writing-mode: vertical-rl会让文字竖着写，但每个汉字仍然是正立的，只是行与行从右向左排。这种写法适合古文或者日文书籍版式，但并不能让字符本身发生角度倾斜。如果目标是让一行水平文字整体逆时针倒下，就必须使用变换属性。
transform: rotate(-90deg)则是把元素作为一个平面图形整体旋转，字符会随着盒子一起转动。这里负号表示逆时针，正号是顺时针。需要注意的是，旋转后元素在文档流中的占位并不会改变，视觉上跑出去的部分可能遮挡其他内容，因此通常还要配合transform-origin和定位来调整。不少人在调试时发现文字转了却跑到div外面，就是因为没有设置好旋转基点。
另外一个容易混淆的点是text-orientation，它只在writing-mode非横向时生效，用来控制字符是保持正立还是侧躺。但它依旧无法替代rotate函数完成任意角度倒置。从底层渲染看，writing-mode影响的是行盒生成逻辑，而transform是合成阶段的矩阵运算，两者处于不同渲染环节。
使用transform实现Div内文字90度逆时针旋转
最实用的方案是给目标div设定固定宽高，再用绝对或相对定位结合transform。下面这段代码展示了一个宽三十像素、高两百像素的容器，里面的文字经旋转后贴着左侧显示。我们把旋转基点设在左下角，这样文字逆时针倒下时会沿着容器左边排列。
.side-title {
position: relative;
width: 30px;
height: 200px;
border: 1px solid #ccc;
}
.side-title span {
position: absolute;
bottom: 0;
left: 0;
transform-origin: left bottom;
transform: rotate(-90deg);
white-space: nowrap;
}
对应的HTML结构可以是一个简单的<div class="side-title"><span>垂直标题</span></div>。这样span里的文字会以左下角为轴向左倒转，看起来就是沿着div左边缘竖排且字符朝左。如果希望文字在容器中央倒转，可以把transform-origin改成center center，并用top与left偏移调整。
这种作法相比单纯用writing-mode的优势在于角度自由，不仅能九十度，还能四十五度或者任意负值。缺点是需要手动算容器尺寸，否则旋转后的文字可能超出预期范围。对于动态内容，建议用JavaScript先测量文字宽度再设置div高度，避免截断。
writing-mode与rotate的组合及兼容性处理
在某些场景下，我们希望文字先竖排再微调角度，这时可叠加使用。例如先用writing-mode: vertical-rl让文本纵向流动，再对内部元素施加小角度rotate做艺术化倾斜。但如果是严格的九十度逆时针，直接用rotate(-90deg)即可，叠加writing-mode反而增加复杂度。
从浏览器支持看，transform和writing-mode在现代Chrome、Firefox、Safari以及Edge都没问题。唯一要注意的是旧版IE对writing-mode的语法不同，如果项目还需兼容IE，应写-ms-writing-mode前缀，而transform也要带-ms-transform。不过目前绝大多数系统已放弃IE，直接写标准属性就能覆盖用户。
为了便于维护，可以把旋转逻辑封装成工具类。比如定义.rotate-90-ccw类名统一设置transform: rotate(-90deg); transform-origin: left bottom;，在任意div上追加该类即可。这样在表格表头、侧边栏、楼层索引等位置复用，既保证视觉一致也减少样式冲突。最后提醒，旋转元素若需点击，其实际命中区域仍是旋转前的矩形，必要时用pointer-events或外层包裹处理交互盲区。
CSSvertical_texttransform_rotate修改时间：2026-08-13 10:03:45