因为transform不触发重排，它仅操作合成层的几何变换矩阵，不改变文档流、盒模型尺寸或布局上下文，浏览器跳过样式计算、布局和绘制，直接在合成阶段利用GPU更新图层位置。
因为 transform 不改变元素在文档流中的几何布局信息，浏览器把它交给「合成层（Composite Layers）」单独处理，跳过了 Layout 阶段。
为什么 transform 不触发重排？
重排（reflow）的本质是浏览器重新计算元素位置、尺寸等布局信息。而 transform（如 translate()、scale()、rotate()）只影响元素的视觉呈现，不修改其在布局树中的原始坐标和盒模型尺寸。
浏览器渲染流水线中，transform 属于最后的「合成」阶段，它操作的是已绘制好的图层纹理，GPU 只需重新组合这些图层，无需触碰样式计算、Layout 或 Paint。
对比之下：left、top、width、margin 这些属性直接参与 Layout 计算，一改就强制重排。
立即学习“前端免费学习笔记（深入）”；
transform 动画卡顿？先检查是否真进了合成层
写了 transform 不代表一定高性能——如果元素没被提升为独立合成层，动画仍可能牵连父层重绘。
- 用 Chrome DevTools 的 Layers 面板 查看元素是否生成了独立图层（Layer）
- 没有？常见原因：
transform值是none或未生效（比如父元素overflow: hidden截断了提升） - 手动触发合成层的稳妥写法：
transform: translateZ(0)或will-change: transform - 注意：
will-change别滥用，只加在真正要动画的元素上，否则内存占用会上升
哪些 transform 写法实际会悄悄触发重排？
绝大多数 transform 是安全的，但有两类容易被忽略：
-
transform: scale(1.5)本身不重排，但如果缩放后内容溢出，且父容器设置了overflow: auto，滚动条出现会触发重排 -
transform: rotate()或skew()若导致子元素文字折行、换行，可能间接引发内部重排（尤其在响应式文本场景） - 动画中混用
transform和top：哪怕只写一次top: 0，也会让整个动画退化到 Layout 阶段
最稳妥的做法是：动画全程只用 transform + opacity，其他属性（包括 z-index）通过 class 切换预设，而非在动画中动态改。
