图片悬停放大必须用transition控制transform的平滑变化，推荐transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94)并设置transform-origin和will-change以避免抖动、闪屏及偏移问题。
图片悬停放大用 transform: scale() 必须加 transition
只写 transform: scale(1.2) 不会动，必须显式声明过渡属性。关键不是“能不能放大”，而是“放大的过程是否平滑”。transition 控制的就是这个过程。
-
transition: transform 0.3s ease-in-out;是最常用组合：作用于transform，时长 0.3 秒，缓动曲线自然 - 不要写
transition: all 0.3s;—— 会意外触发其他属性（比如opacity变化）的过渡，干扰预期行为 - 必须同时给默认状态和
:hover状态都定义transform，否则首次悬停可能跳变（尤其在 Safari 中）
transform-origin 决定缩放中心点
默认以图片中心为原点缩放。如果想让图片从左上角“弹出”，或保持顶部对齐不位移，就得改原点。
- 居中放大（默认）：
transform-origin: center; - 左上角放大（适合卡片左上角图标）：
transform-origin: top left; - 顶部居中（避免向下溢出容器）：
transform-origin: top center; - 注意：若父容器
overflow: hidden，缩放后边缘被裁切，此时调transform-origin比调scale值更可控
实际 CSS 写法示例（含防抖与兼容）
以下代码可直接复制使用，已避开常见渲染抖动和 Safari 闪屏问题：
img.zoomable {
display: block;
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform-origin: center;
}
img.zoomable:hover {
transform: scale(1.15);
}
/ 防 Safari/旧版 Chrome 渲染异常 /
img.zoomable {
will-change: transform;
}
-
cubic-bezier(0.25, 0.46, 0.45, 0.94)比默认ease更轻快，适合小幅度缩放 -
will-change: transform提前提示浏览器该元素将动画，避免悬停瞬间卡顿（尤其在移动端） - 不用
zoom属性 —— 它非标准、不支持transition，且在 flex/grid 布局中行为不可靠
响应式场景下 scale 值要动态调整
在移动设备上盲目放大 1.2 倍可能导致图片撑破容器或遮挡内容。建议用媒体查询降级或禁用：
立即学习“前端免费学习笔记（深入）”；
- 小屏幕取消悬停效果：
@media (max-width: 768px) { img.zoomable:hover { transform: scale(1); } } - 或统一用较小缩放值：
scale(1.08)，对高 DPR 屏幕更友好 - 如果图片是
background-image，不能直接用transform缩放，得换思路（如改background-size+transition）
缩放本身简单，但真正稳定跑在各种浏览器、各种布局里，关键是 transition 的目标属性要精准、transform-origin 要匹配容器约束、will-change 要适时启用——这些细节漏掉一个，就容易出现闪、卡、偏移或移动端失效。
