transform: rotate仅影响渲染层，不改变布局空间；包裹父容器可提供明确盒模型，配合调整margin、padding和transform-origin来对齐视觉与交互。
transform: rotate 后元素视觉旋转但布局空间不变
这是因为 transform 只影响渲染层，不参与 layout 阶段计算。浏览器仍按原始宽高、位置分配文档流空间，旋转后的视觉区域只是“画上去”的，原占位没动。常见表现是：旋转文字盖不住下方元素，或 hover 区域错位（鼠标得移到原位置才触发）。
为什么用父容器包裹能缓解这个问题
单独对内联元素（如 <span></span>）加 rotate() 通常无效或行为异常，因为内联元素没有自己的盒模型边界。包裹一层 <div> 或设 <code>display: inline-block 后，该容器获得明确的尺寸和定位上下文，transform 才能稳定作用于一个可测量的盒子。
- 包裹容器必须有显式尺寸（
width/height）或内容撑开，否则rotate可能无视觉变化 - 若需保持行内流式布局，用
display: inline-block比block更安全 - 包裹后记得重设
transform-origin，否则默认以左上角为基点，旋转容易跑出可视区
调整父容器的关键参数：margin、padding 和 transform-origin
仅包裹还不够——旋转后视觉溢出或留白过大时，要靠组合调整来“对齐”。这不是 hack，而是补足 transform 不改变布局的天然限制。
-
margin负值可手动回收多余占位（例如旋转 45deg 后顶部多出空白，用margin-top: -10px上提） -
padding在包裹容器上预留缓冲区，避免旋转后内容贴边裁剪 -
transform-origin: center比默认的left top更符合直觉，尤其配合scale或rotate时 - 避免在包裹容器上再叠
transform（比如同时rotate和translate），顺序错乱会导致定位漂移
真正要注意的坑：子元素定位和点击区域
一旦父容器加了 transform，它就强制创建新包含块和堆叠上下文。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 内部
position: absolute子元素会以该父容器为参考，不是祖先relative元素 -
z-index只在该新堆叠上下文中生效，可能被同级未 transform 元素遮挡 - 用 JS 获取
getBoundingClientRect()得到的是旋转前的矩形，交互逻辑（如拖拽、点击判断）需自行换算 - 如果必须精确响应旋转后的形状，考虑用
clip-path或 SVG 替代，transform本身不解决交互映射问题
