最直接方法是用CSS transform: rotate() 作用于文字容器，需注意旋转原点、元素显示模式、溢出裁剪及可访问性影响。
用 transform: rotate() 旋转文字最直接
HTML5 本身不提供专门的“文字旋转”标签，所有旋转都靠 CSS 的 实际使用时，是否需要动画、是否要兼容老浏览器、是否和其他变换叠加，都会影响写法。 多数问题出在坐标系理解或样式覆盖上，不是语法写错。 真正难的不是让文字转起来，而是判断该不该转、转多少、转完要不要调整间距、对齐或响应式行为。这些细节不会报错，但会悄悄破坏体验。 立即学习“前端免费学习笔记（深入）”；transform 实现。核心就是给文字容器（如 、、transform: rotate(45deg)。注意：它旋转的是整个元素盒模型，不是纯文本流——这意味着可能影响布局、点击区域和可访问性。
rotate() 的单位必须是角度（deg）、弧度（rad）或圈数（turn），写成 rotate(45) 会失效transform-origin，比如 transform-origin: top left
overflow: hidden，旋转后超出部分会被裁剪）需先设 display: inline-block 或 block，否则 transform 可能不生效
transform: rotate() 在不同场景下的写法差异
transform: rotate(-15deg) 即可transition: transform 0.3s ease，再用 :hover 或 class 切换角度transform: rotate(30deg) scale(1.2)，顺序重要——先旋转再缩放，反之结果不同-ms-transform 前缀，但现代项目基本可忽略；iOS Safari 低版本曾有重绘 bug，加 transform: rotate(0.001deg) 强制硬件加速可缓解常见错误：文字“没转”或“转歪了”
transform 重置了子级效果），或元素实际宽高为 0（空 无内容）transform-origin，视觉上容易“飞出去”。试试 transform-origin: 0 0 锚定左上角backface-visibility: hidden 或 translateZ(0) 触发 GPU 渲染.rotated-text {
display: inline-block;
transform: rotate(-10deg);
transform-origin: top left;
backface-visibility: hidden;
}
