用 transform: scale() 配 transition 最快但易卡顿、复位失灵、溢出容器，需控制 transform-origin 和重排时机；图片“跑出容器”因默认 origin 居中且父容器未设 overflow: hidden 或图片未设 display: block；复位失效因浏览器合并重绘，应强制重排或用独立 class 切换；width/height 过渡更稳但性能差，适合小图；关键在理解 transform 与 layout 渲染流水线差异。
直接用 transform: scale() 配 transition 最快，但容易卡顿、复位失灵、缩放溢出容器——关键得控制 transform-origin 和触发重排时机。
为什么 transform: scale() 悬停后图片会“跑出容器”
默认 transform-origin 是 50% 50%（居中），缩放时宽高同时向四周扩张。如果父容器没设 overflow: hidden，或子元素没设 display: block + width/height: 100%，图片就会撑破边界。
- 必须给图片父容器加
overflow: hidden - 图片本身要设
display: block，否则width: 100%可能不生效 - 显式设置
transform-origin: center或按需改成top left等，避免意外偏移 - 若需“局部放大不溢出”，优先用
object-fit: cover+ 容器固定尺寸，而非依赖 scale 裁剪
transition 复位失效：hover 离开后还在动
这是最常被忽略的渲染机制陷阱：浏览器把“移除 hover 类 → 改变 transform → 重加类”的连续操作合并进一次重绘，导致 transition 没被清空，缩放动画持续到目标值才停。
- 解决方法不是删 class，而是强制触发一次重排：
element.offsetHeight或getComputedStyle(element).transform写在样式变更之间 - 更稳妥的做法是用两个独立 class：
.zoom-in和.zoom-out，用 JS 切换并确保中间有帧间隔 - 避免在 :hover 里写
transition: all .3s，只过渡明确属性，如transition: transform .3s - 移动端要注意
:hover不稳定，建议用touchstart/touchend模拟或改用 click 触发
替代方案：用 width/height 过渡更可控但有性能代价
transform 是 GPU 加速的，width/height 触发 layout，频繁修改会掉帧。但它的好处是复位绝对即时、缩放中心天然贴合左上角、兼容性更好（IE10+）。
立即学习“前端免费学习笔记（深入）”；
- 适合小图或低频交互场景，比如卡片列表中的缩略图
- 务必搭配
will-change: width, height提前告知浏览器优化意图 - 不要对 img 元素直接设
width过渡，先包一层<div class="img-wrapper">，再让 img 宽高 100%，过渡 wrapper 尺寸 - 若需等比缩放，用
padding-top百分比维持宽高比，再用position: absolute布局内部 img
真正难的不是让图片动起来，而是让它在各种设备、各种交互节奏下都“停得准、起得稳、不闪、不跳”。很多 bug 其实来自没意识到 transform 和 layout 属于不同渲染流水线，而你写的那行 JS 正好卡在它们交接的缝隙里。
