transform不改变布局空间，getboundingclientrect()返回原始盒模型尺寸；需用js测算旋转后视觉区域并动态设置宽高，或改用svg实现布局参与旋转。
因为 transform 作用于渲染层，不参与布局计算——浏览器先按原始盒模型完成 layout（重排），再在合成层上绘制变换后的视觉效果，所以 offsetWidth、getBoundingClientRect() 返回的仍是未变形前的尺寸和坐标。
transform 不改变 margin box 是规范行为，不是 bug
W3C 明确规定：transform 属于「视觉呈现层操作」，不影响文档流。元素的 margin box（决定它在流中占多少位置）完全不变，兄弟元素不会“让位”，父容器也不会被撑开。常见表现包括：
-
transform: rotate(30deg)的卡片盖住下方文字，但文字仍按原位置排布 - 父容器
height: auto时，仅靠子元素transform: translateY(100px)无法撑高 -
:hover区域、点击热区、position: absolute子元素的定位参考点，全基于原始矩形
为什么 getBoundingClientRect() 还是旧值？
getBoundingClientRect() 返回的是 layout 阶段计算出的几何边界，不是渲染后像素位置。即使元素已旋转 45°，该方法仍返回未 transform 前的 left/top/width/height。若需真实视觉区域，得手动换算或用 element.getTransformedBoundingBox()（非标准，需 polyfill）。
- Chrome/Firefox/Safari 行为一致，无兼容性差异
-
transform-origin只影响旋转中心，不改变 margin box 的 origin 点（即 top/left 坐标） -
will-change: transform可能触发图层提升，但不会让 layout 阶段重新计算尺寸
想让旋转后“真正腾出空间”，只能绕开 transform
硬要 transform 影响布局，等于对抗浏览器渲染管线设计。实际可用路径只有三个：
- 用
width/height手动预留外接矩形尺寸（如 100×100 元素旋转 45°，设width: 142px; height: 142px;） - 改用
zoom（会改变实际占用空间，但最小字号限制、非标准、Safari 支持弱） - 换 SVG：
<g transform="rotate(45)"></g>中的旋转参与 layout 计算，但仅限 SVG 上下文
最容易被忽略的点是：一旦父容器加了 transform，它就强制创建新包含块和堆叠上下文——内部 position: absolute 子元素的定位参考系、z-index 作用域、事件 hit-testing 坐标系，全都变了，且无法通过纯 CSS 恢复。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
