CSS动画无法让元素缩放后保持物理碰撞体积，因transform不改变margin box，导致视觉溢出但交互区域不变；须用transform-style: preserve-3d设于直接父容器并配合translateZ(0)隔离变换上下文。
直接说结论：CSS动画本身无法让元素在视觉变化时“保持物理碰撞体积”，因为transform、scale、rotate等操作不改变布局盒（margin box），而浏览器判定点击、溢出、相邻流式布局的依据，永远是这个原始盒——不是你看到的样子。
为什么 hover 时 scale 按钮会“压住”旁边文字？
这不是 bug，是浏览器行为规范。当你写 transform: scale(1.2)，元素视觉变大了，但它的 margin box 尺寸、offsetWidth、与兄弟元素的文档流间距，全都没变。结果就是：视觉上它伸出去盖住了隔壁内容，但鼠标必须点在它原始位置才触发 :hover 或事件；同时，如果父容器没设 overflow: hidden，缩放后溢出部分还会触发重绘抖动或滚动条闪现。
- 常见错误现象：
scale后按钮遮挡右侧图标，但点击区域还在原地；移动端 Safari 上文字突然模糊跳动 - 根本原因：父容器未建立独立变换上下文，子元素缩放被降级到普通图层渲染
- 性能影响：未隔离上下文时，每次缩放都可能触发 layout → paint → composite 全流程，帧率掉到 30fps 以下
用 transform-style: preserve-3d 隔离变换上下文
这是最常被跳过的一步。它不是加给要缩放的按钮，而是加给它的**直接父容器**，作用是告诉浏览器：“这个容器和它的子元素共用一个 3D 渲染层，别把它们拆开算。”
- 正确写法：
.btn-wrapper { transform-style: preserve-3d; }，且该 wrapper 必须是按钮的**直接父级** - 错误写法：
body { transform-style: preserve-3d; }（全局无效）、.btn { transform-style: preserve-3d; }（子元素上写无效） - 配合使用更稳：
.btn-wrapper { transform: translateZ(0); }或临时加will-change: transform（注意：hover 开始时 set，结束时 remove，避免长期占用合成层）
禁用 width/height/margin 参与动画，统一用 transform 控制
混用 width: 200px 和 transform: scale(1.2) 是典型陷阱：布局系统仍按 200px 分配空间，但视觉显示为 240px，导致兄弟元素错位、hover 切换时频繁重排。
- 必须只用
transform系列控制尺寸/位置/旋转：如scale()、translateX()、rotate() - 若需“占位不变”，给按钮套一层
position: relative容器，并设overflow: hidden截断溢出 - 慎用
scaleX()单独拉伸：容易放大父容器内边距计算误差，尤其在 flex/grid 布局中
旋转后想让周围元素“让位”？换思路，别硬刚 transform
transform: rotate() 天然不参与布局计算，指望它自动撑开父高、推开兄弟元素，注定失败。真实项目里，能落地的只有三种路径：
- 手动预留空间：算出旋转后外接矩形宽高（比如正方形 100×100 旋转 45°，外接矩形是 ≈142×142），设 wrapper 的
width/height，再内部居中旋转 - 包裹 + 负 margin 补偿：用
margin-top: -10px抵消旋转后顶部多出的空白，适用于小角度微调 - 彻底绕开 transform：用
width/height动画 +transform-origin控制缩放锚点，虽然性能略低，但布局可预测
真正容易被忽略的，是移动端 Safari 对嵌套 transform 的合成层管理极其敏感——不显式加 transform-style: preserve-3d 和 translateZ(0)，哪怕只是 hover 一个按钮，也可能触发整页重绘抖动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
