只写 transform: rotate(-90deg) 会导致元素坐标系旋转，原 width/height 方向互换，但浏览器仍按原始尺寸布局，造成文字溢出、悬空及点击热区错位；必须配合 transform-origin 调整旋转基点，并显式互换 width 与 height 值以适配新方向。
直接用 transform: rotate(-90deg) 是最简单、兼容性最好的方案，但必须配 transform-origin 和尺寸调整，否则文字会跑出视口或点击区域错位。
为什么不能只写 rotate(-90deg)
旋转后元素坐标系跟着转了，原 width 变成垂直方向的“高度”，height 变成水平方向的“宽度”。浏览器仍按原始尺寸布局，导致文字悬空、溢出、点击热区偏移。
- 必须显式设置
width和height，且数值要互换（比如原宽 120px、高 32px，旋转后设width: 32px; height: 120px） -
transform-origin推荐设为left top或center，避免默认50% 50%导致整体位移 - 若父容器是
position: fixed（常见于侧边按钮），旋转后需用top/right重新定位，不能依赖原 layout 流
writing-mode 在侧边按钮里基本不适用
侧边反馈按钮通常是小尺寸、单行、固定宽高的块级元素，writing-mode: vertical-rl 会强制整块内容竖排流，带来两个硬伤：
- 高度自动塌陷，必须手动设
height，而此时height实际控制的是“视觉宽度”，极易混淆 -
text-orientation: mixed虽能保汉字直立，但按钮文字通常含英文/数字（如 “Feedback”、“联系我们”），混合朝向反而降低可读性 - 在
flex容器中使用会翻转主轴，破坏原有布局逻辑
实际可用的最小可行代码
假设按钮结构是：<button class="feedback-btn">意见反馈</button>
.feedback-btn {
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
transform-origin: left top;
width: 36px;
height: 120px;
white-space: nowrap;
padding: 0 4px;
font-size: 14px;
}
-
translateY(-50%)是为了把旋转后的按钮垂直居中（基于原top: 50%） -
white-space: nowrap防止中文被断行，尤其在窄宽下 - 字体大小建议 ≤14px，否则旋转后文字过粗、边缘糊
移动端和可访问性要注意什么
旋转文字本身不影响屏幕阅读器读取顺序，但会干扰缩放行为和 touch 区域判断：
- 务必加
touch-action: manipulation，避免 iOS Safari 误判为拖拽手势 - 不要用
transform: rotate(90deg)（顺时针），它会让文字从下往上读，违背中文阅读习惯 - 若按钮带图标，图标也得同步旋转，或改用 SVG symbol +
rotate单独控制 - 测试时用真机 zoom 到 200%，确认文字没被截断、点击热区仍覆盖全部文本
真正麻烦的不是旋转本身，而是旋转后尺寸逻辑反转 + 定位基准偏移。很多人卡在“写了 rotate 却看不见文字”，其实只是它已经飘到屏幕外去了。
