scale(1.1) hover模糊主因是浏览器对非整数缩放采用双线性插值导致细节丢失，尤其Chrome/Safari非Retina屏明显；应配translateZ(0)或will-change: transform启用GPU加速，禁用width/height动画，显式设transform-origin: center center防偏移，过渡时间宜选200–300ms并用cubic-bezier缓动。
直接用 transform: scale() 配合 transition 就能实现，但放大后图片边缘模糊、缩放中心偏移、文字抖动这些坑，不调参就上线会翻车。
为什么 scale(1.1) 一 hover 就糊？
浏览器对非整数像素缩放默认用双线性插值，放大时高频细节丢失。尤其 Chrome 和 Safari 在非 retina 屏上更明显。
- 加
image-rendering: -webkit-optimize-contrast（Safari）或image-rendering: crisp-edges（部分场景有用），但兼容性差 - 更稳的解法是强制开启 GPU 加速：给图片加
transform: translateZ(0)或will-change: transform - 别用
width/height动画放大——会触发重排，卡顿且失真；只用transform
transform-origin 设错导致图片往左上角飞走
默认 origin 是 50% 50%（中心），但如果你卡片用了 overflow: hidden 且图片没居中，放大时就会裁切偏移。常见于 object-fit: cover + 宽高固定的容器。
- 显式写死：图片父容器设
transform-origin: center center，确保缩放锚点在可视区中心 - 如果卡片布局用 Flex，确认图片没有
align-self: flex-start类样式把它顶到顶部，否则center center仍会偏移 - 慎用
transform-origin: 0 0—— 除非你明确要左上角为基点（比如做“拉幕”效果）
过渡时间 & 缓动函数怎么选才不肉不炸？
电商卡片 hover 是瞬时交互，过渡太长（>300ms）用户会觉得延迟，太短（
立即学习“前端免费学习笔记（深入）”；
- 推荐
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)—— 比ease更快启动、更柔缓收尾，模拟物理惯性 - 不要只写
transition: all 0.25s—— 会把opacity、color等无关属性也套进同一组过渡，增加渲染负担 - 移动端需补
transition: transform 0.25s和will-change: transform，否则 iOS Safari 常掉帧
真正麻烦的是多图卡片里文字层（如价格、标签）跟着缩放抖动——得单独给文字加 transform: scale(1) 覆盖继承，或者用 backface-visibility: hidden 切独立合成层。这点常被忽略，直到 QA 提 bug 才发现。
