直接写img:hover { transform: scale(1.2); }会出问题，因图片默认为行内元素产生baseline空白导致悬停时“跳一下”，且缺失初始transform: scale(1)、transition未声明在非hover状态、transform-origin未显式设为center、父容器缺overflow: hidden，以及移动端无真正hover状态。
为什么直接写 img:hover { transform: scale(1.2); } 会出问题
多数人一上来就给 img 元素加 :hover 和 transform: scale()，结果发现图片“跳一下”、底部突然上移、放大后边缘糊、甚至遮罩层跟着拉伸变形。这不是写法错，而是漏了几个关键前提：图片默认是行内元素，有 baseline 空隙；transform 没初始值，浏览器无法预判动画起点；父容器没裁剪边界，放大后溢出干扰布局。
transform-origin 不写死就容易偏移
虽然文档说默认是 50% 50%，但实际中它会被 object-fit、父容器的 padding、flex 的 align-items 或 border 覆盖掉。缩放中心一偏，图片就像被“吸”向角落。
- 用
object-fit: cover时，显式写transform-origin: center center - 容器无 padding/border 且图片拉满宽高，
transform-origin: 0 0反而更稳 - 别写
left top—— 它和0 0在 Safari 中解析不一致 - 用开发者工具看 computed styles，确认真实值是不是被继承覆盖了
transition 必须写在非 hover 状态下
常见失效现象：鼠标移入没动画、只动一次、或者放大后卡住不动。根本原因是把 transition 写在 :hover 里，而初始状态没声明可过渡属性。CSS 过渡需要“起点有值、终点有变、中间有定义”三者齐全。
- 正确写法：
.img-container img { transform: scale(1); transition: transform 0.3s ease; } -
:hover里只改值：.img-container:hover img { transform: scale(1.15); } - 绝对不要写
transition: all—— 它可能意外触发width、margin等重排属性 - 缩放倍数建议控制在
1.05–1.2之间，1.3+容易糊，尤其低分辨率图
移动端 :hover 不是失效，是压根没这个状态
iOS Safari 和多数安卓浏览器没有持续 hover 概念。所谓“悬停”，其实是第一次点击激活伪类，第二次才模拟，之后就断连。这不是 bug，是规范行为。纯靠 :hover 做交互，在真机上大概率闪一下就结束，甚至遮罩残留。
- 稳妥方案是用媒体查询隔离：
@media (hover: hover) and (pointer: fine) { .img-container:hover img { transform: scale(1.15); } } - 关键功能别依赖 hover —— 它只是增强，不是主路径
- 如果必须支持触屏，用 JS 监听
touchstart动态加 class，再用 CSS 控制：.img-container.is-hovered img { transform: scale(1.15); } - 别滥用
will-change: transform，只在复杂页面中加；更通用的硬件加速写法是默认状态加transform: scale(1) translateZ(0)
transform 会创建新层叠上下文，z-index 可能被重置，遮罩或弹窗容易错位。遇到这类情况，得先检查 computed z-index 是否还按预期生效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
