hover放大应使用transform: scale()配合transition实现，transition必须写在常态选择器中，避免重排卡顿；注意transform函数执行顺序、像素对齐及嵌套缩放问题。
hover 时用 transform: scale() 实现平滑放大
直接用 transform: scale() 配合 transition 是最可靠的方式，浏览器对 transform 的硬件加速支持好，不会触发重排，动画也更顺滑。别用 width/height 或 font-size 做放大，那会强制重排，卡顿明显。
-
transform属于合成属性，现代浏览器默认走 GPU 加速 -
transition必须写在非:hover的基础选择器上，否则第一次悬停无过渡效果 - 推荐用
transform: scale(1.1)这类相对值，避免因父容器或内容变化导致缩放错位 - 如果元素有绝对定位或
transform其他操作（比如translateY），记得合并写法：transform: translateX(10px) scale(1.1)，否则后写的会覆盖前面的
button {
transition: transform 0.2s ease;
}
button:hover {
transform: scale(1.15);
}
transition 写在哪？为什么不能只写在 :hover 里
过渡效果必须定义在**常态规则**中，也就是未悬停时的选择器块里。如果只写在 button:hover { transition: ... }，浏览器直到鼠标移入才解析过渡声明，此时 transform 的起始值已瞬间应用，过渡就失效了——看起来就是“啪”一下变大，没动画。
- 正确位置：
button { transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); } - 可单独控制缓动曲线，
cubic-bezier(0.25, 0.46, 0.45, 0.94)比默认ease更自然 - 不要写
transition: all 0.2s，它会把所有变化属性都过渡，可能意外拖慢颜色、边框等无关属性的响应
放大后内容模糊？可能是 transform 导致像素对齐偏移
某些浏览器（尤其是 Chrome + Windows）在非整数缩放（如 scale(1.15)）时，可能让文字或边框渲染模糊，本质是 subpixel rendering 失效。这不是 bug，而是缩放后元素不再严格对齐设备像素网格。
- 临时缓解：加
will-change: transform提前提示浏览器优化（但别滥用，可能引发内存或闪烁问题） - 更稳方案：用
scale(1.2)这类能被 0.5 整除的值（1.2 = 6/5），部分场景下渲染更清晰 - 若必须精确控制清晰度，可配合
backface-visibility: hidden强制开启合成层，有时能改善抗锯齿表现
button {
transition: transform 0.2s ease;
backface-visibility: hidden;
}
button:hover {
transform: scale(1.2);
}
需要同时移动+放大？注意 transform 合并顺序
transform 是一个复合声明，多个函数不是叠加执行，而是按**书写顺序从右到左运算**。比如 transform: translateX(10px) scale(1.2)，实际先缩放再平移；反过来写就会先平移再缩放，结果完全不同。
立即学习“前端免费学习笔记（深入）”；
- 常见误写：
transform: scale(1.2) translateX(10px)→ 元素先变大，再往右移 10px（此时 10px 是放大后的 10px，视觉位移更大） - 想保持位移量不变，应写成：
transform: translateX(10px) scale(1.2)→ 先移 10px，再整体放大 - 如果用了
transform-origin，它只影响scale和rotate的锚点，不影响translate，但会改变最终视觉中心
transform 会复合，比例相乘，很容易超预期。这种场景建议改用 scale() 配合独立容器隔离，而不是层层嵌套。 
