必须显式添加 transition 才能实现 hover 缩放动画，且需写在基础选择器上；缩放中心由 transform-origin 控制，建议用关键词；移动端需降级或 JS 处理；模糊问题可通过整数缩放、translateZ(0) 或 backface-visibility 缓解。
hover 时用 transform: scale() 缩放元素，但没动画？
默认缩放是瞬时的，必须显式加 transition 才能平滑。只写 transform: scale(1.2) 不会动，浏览器不知道你想要过渡多长时间、用什么缓动函数。
常见错误是只在 :hover 里加 transform，却忘了在原始状态（非 hover）也声明 transition，或者把 transition 写在 :hover 块里——那样鼠标移出时就没动画了。
-
transition必须写在基础选择器（如.card）上，而不是仅在:hover中 - 推荐写全属性：
transition: transform 0.3s ease;，避免影响其他transform操作（比如后续加旋转） - 不要用
all 0.3s，它会让所有可动画属性都过渡，可能触发意外重排或性能抖动
scale 缩放中心点偏移，图片/文字“飘”走了
transform: scale() 默认以元素盒模型的中心点（transform-origin: 50% 50%）为基准缩放。如果父容器没设 overflow: hidden，缩放后内容超出边界就会撑开布局或溢出显示。
- 给缩放容器加
overflow: hidden，防止子元素溢出干扰布局 - 需要以左上角缩放？改
transform-origin: top left;；以底部居中？用transform-origin: bottom center; - 慎用
%值做transform-origin，在 flex/grid 容器中可能因对齐方式导致计算偏差，优先用关键词（top,center）或像素值
移动端 touch 设备上 hover 效果不触发
iOS Safari 和部分安卓浏览器对 :hover 支持有限：首次触摸后才激活伪类，且常伴随延迟或不一致行为。纯 :hover + scale 在手机上基本不可靠。
立即学习“前端免费学习笔记（深入）”；
- 真要兼容触控，得配合
:active（短按瞬间）或 JS 监听touchstart/touchend切换 class - 更轻量的做法：对移动设备用媒体查询降级，比如
@media (hover: none) { .btn { transform: scale(1); } } - 注意
transform在老版 Android WebView（4.4 以下）需加-webkit-transform前缀，但现代项目通常可忽略
scale 放大后边缘模糊、文字发虚
这是 GPU 渲染的典型副作用：浏览器把缩放后的元素交由 GPU 处理，但亚像素渲染未对齐，尤其在非整数缩放比（如 scale(1.15)）下更明显。
- 优先使用整数倍缩放（
scale(1.2)比scale(1.23)更稳），或限定在 1.0–1.3 范围内 - 强制开启硬件加速并微调对齐：
transform: scale(1.2) translateZ(0);，有时能缓解模糊 - 对文字元素，可加
backface-visibility: hidden;或will-change: transform;（谨慎用，别滥用）
