scale默认以元素中心为基准点缩放，不影响文档流；需配合transform-origin调整原点，结合transition实现平滑动画，并注意移动端硬件加速及JS测量偏差。
scale 缩放的基准点默认是元素中心
直接写 transform: scale(1.5) 会让元素以自身宽高中心为原点放大 1.5 倍，内容、边框、阴影都会等比拉伸。如果想让缩放从左上角开始，得配合 transform-origin：
transform-origin: top left;transform: scale(1.2);
常见误操作是只改 scale 却忘了调整原点，导致动画“飘”出预期位置。
scale 不影响文档流，但可能遮挡其他元素
transform 是视觉层面的操作，缩放后的元素仍占据原始尺寸的布局空间。这意味着：
- 放大后内容溢出，不会触发父容器重排或滚动条自动出现
- 相邻元素不会被“推开”，可能被缩放后的内容覆盖
- 若需真实占位变化，得改
width/height，而非仅用scale
scale 配合 transition 实现平滑动画
单独写 transform: scale(1.3) 是瞬时生效；要过渡效果，必须加 transition：
transition: transform 0.2s ease-in-out;
注意两点：
- 不要写
transition: all 0.2s;—— 会意外触发其他属性（如 color）的过渡，拖慢性能 - 缩放值推荐用小数（如
scale(1.15)），避免整数倍（如scale(2)）在某些浏览器下出现像素对齐模糊 - 移动端要注意开启硬件加速：
transform: scale(1.2) translateZ(0);
scale 在 flex 或 grid 容器中行为一致，但慎用于子项尺寸计算
flex item 或 grid item 应用 scale 后，其 getBoundingClientRect() 返回的尺寸仍是原始值，而视觉尺寸已变。这会导致：
- JS 动态测量位置时偏移（比如 tooltip 跟随缩放按钮，坐标算不准）
- 使用
calc(50% - 10px)类似逻辑定位时，百分比仍基于原始宽高 - 若依赖缩放后尺寸做响应式判断，必须手动乘以 scale 系数
scale 不是第一选择。 
