transform: scale() 不触发重排，只触发重绘和合成；缩放不改变元素几何尺寸，但影响视觉呈现、溢出裁剪及阴影/圆角等效果。
transform: scale() 会触发重排还是重绘？
scale() 属于 transform，它只影响图层合成阶段，不改变元素的几何尺寸（比如 offsetWidth 不变），因此不会触发 layout（重排），只会触发 paint（重绘）和 composite（合成）。但要注意：如果缩放后导致子元素溢出、遮挡变化或触发了 will-change: transform 以外的其他属性变更（如 opacity 变化叠加），可能间接引发更多绘制开销。
- 缩放 1.5 倍后，元素的
getBoundingClientRect()返回的宽高仍是原始值，但视觉上变大 - 父容器的
overflow: hidden依然按原始尺寸裁剪，缩放后超出部分会被截断 - 若元素有
box-shadow或border-radius，缩放会等比拉伸这些效果，有时需配合transform-origin调整锚点
scale() 的参数与常见误用
scale() 接收 1~2 个数值参数：scale(sx) 表示 X/Y 同向缩放；scale(sx, sy) 可分别控制横向/纵向。负值会翻转元素（比如 scale(-1, 1) 水平镜像），这点常被忽略却很有用。
- 写成
scale(0.5, 0.5)和scale(0.5)效果一致，但后者更简洁 - 不要写成
scale("0.5")—— 字符串会被解析为scale(1)，CSS 不报错但无效 - 动画中直接写
scale(0)会导致元素“消失”，但依然占据文档流位置（因为 transform 不影响布局） - 在 Flex/Grid 容器内缩放子项时，主轴尺寸计算仍基于原始大小，缩放不影响 flex 分配逻辑
transform-origin 影响缩放中心点
默认缩放中心是元素盒模型的中心（50% 50%）。如果想让元素从左上角放大，必须显式设置 transform-origin: top left，否则即使 scale(2) 也会以中心为基点向外撑开，造成位移感。
button {
transform: scale(1.2);
transform-origin: bottom right;
}
-
transform-origin的值可以是关键字（top,center）、百分比（0% 0%）、像素（10px 20px） - 该属性必须写在
transform之前（CSS 级联顺序不影响，但语义上建议前置），且对所有transform函数生效 - 在 SVG 中，
transform-origin不起作用，需改用transform="scale(2) translate(-x, -y)"手动偏移
scale() 在响应式与交互中的实际坑
用 scale() 实现按钮悬停放大很常见，但容易忽略焦点管理、可访问性与设备像素比问题。
立即学习“前端免费学习笔记（深入）”；
- 缩放后元素 hit-area（点击热区）不变，用户可能点到“视觉上”放大的区域却没触发事件 —— 应配合
padding或min-width/min-height提前预留空间 - 在高 DPR 屏幕（如 Retina）上，
scale(0.5)缩小可能导致文字模糊，因浏览器对 subpixel 渲染支持有限；此时优先考虑用font-size或zoom（不推荐，已废弃） - 用 JS 动态设置
style.transform = 'scale(' + factor + ')'时，注意不要覆盖已有 transform 值；应使用transform: translateX(10px) scale(1.1)合并写法，或用CSS.setProperty('--scale', factor)配合 CSS 变量
width/height 或 font-size。 
