网站侧边反馈按钮：如何用旋转90度的方式垂直排列文字-html教程-PHP中文网

只写 transform: rotate(-90deg) 会导致元素坐标系旋转，原 width/height 方向互换，但浏览器仍按原始尺寸布局，造成文字溢出、悬空及点击热区错位；必须配合 transform-origin 调整旋转基点，并显式互换 width 与 height 值以适配新方向。

网站侧边反馈按钮：如何用旋转90度的方式垂直排列文字

直接用 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 会强制整块内容竖排流，带来两个硬伤：

jQuery+CSS3 3D立体图片排列布局代码

下载

高度自动塌陷，必须手动设 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;
}