用 transform: scale() 配合 transition 可实现平滑悬停放大，需注意 transform-origin 默认值、避免意外创建层叠上下文、以及 scale 不影响文档流的特性。
直接给结论：用 transform: scale() 配合 transition 就能实现平滑悬停放大，但必须注意 transform-origin 默认行为、层叠上下文是否被意外创建、以及 scale 对布局无影响这个关键特性。
为什么只写 scale(1.2) 有时会“闪一下”或“偏移”
这是因为 scale() 默认以元素中心点（transform-origin: center center）为基准缩放，但如果父容器或自身设置了 padding、border、line-height 等影响盒模型的属性，视觉上就容易产生“跳动”错觉；更常见的是：图片或图标本身是行内元素（如 <i> 或未设 display 的 <svg>），其基线对齐（baseline）导致缩放后位置浮动。
实操建议：
- 统一设
display: inline-block或display: block，消除行内对齐干扰 - 显式声明
transform-origin: center center（虽是默认值，但可避免被继承样式覆盖） - 若需严格居中且不扰动流式布局，把图标包在
position: relative容器里，再对图标设position: absolute+inset: 0+margin: auto
transition 写在哪？只过渡 transform 而非 all
很多初学者直接写 transition: all 0.3s ease，结果鼠标移入时颜色、边框、阴影全跟着动，动画变“脏”，还可能触发重排（reflow）。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 精准控制：只过渡
transform属性，写成transition: transform 0.3s ease-in-out - 避免隐式重绘：不要在悬停态同时改
width/height，那会强制浏览器计算新盒尺寸；scale是纯 GPU 加速变换，性能更好 - 移动端注意：iOS Safari 旧版本对
transform过渡有渲染毛刺，可加will-change: transform提前提示（但别滥用，它本身有内存开销）
放大后被其他元素遮挡？z-index 不生效的真正原因
写了 .icon:hover { z-index: 10; } 却没用——因为 z-index 只对定位元素有效，且只在**同一层叠上下文**内比较。单纯 scale 不会创建新层叠上下文，但一旦你给图标加了 position: relative 却没设 z-index，它就和兄弟元素处于同一层级，悬停时就算设了 z-index: 10，也因没有“定位前提”而被忽略。
实操建议：
- 必须写
position: relative（或absolute/fixed），再配z-index: 1（默认态）和z-index: 2（悬停态） - 避免意外创建层叠上下文：不要给父容器加
opacity < 1、filter、transform等会触发新 stacking context 的属性，否则子元素的z-index就只在该容器内有效 - 检查 DevTools 的 Layers 面板，确认放大后的图层是否真被提升
最易被忽略的一点：scale 放大是视觉变换，不改变文档流尺寸，所以它不会撑开父容器、也不会影响周围元素布局——这既是优点也是陷阱。如果你期望“放大后自动推挤旁边内容”，那 scale 不适合，得换 width/height + transition，或者用 animation 配合 @keyframes 做更可控的形变。
