纯CSS局部放大需容器设固定宽高+overflow:hidden，图片用object-fit:cover填满，悬停时img加transform:scale()与transform-origin控制焦点，移动端需translateZ(0)触发GPU加速。
用 transform: scale() 实现局部放大，但必须配合 overflow: hidden
纯 CSS 做“局部放大”，本质是让图片在容器内缩放并裁剪溢出部分。只写 transform: scale(1.5) 不会聚焦——图片会整体放大并位移，焦点偏移。关键在于：容器要设固定宽高 + overflow: hidden，图片默认居中，悬停时仅放大、不移动。
常见错误是给图片加 transition 却忘了给容器设 overflow: hidden，结果放大后看到图片四边乱跑；或者用了 position: absolute 但没配 top/left 居中，导致放大的中心点偏了。
- 容器（如
<div class="zoom-container">）必须设明确的width和height，且overflow: hidden - 内部
<img>设width: 100%; height: 100%; object-fit: cover;，确保填满且不拉伸 - 悬停时对
img加transform: scale(1.3); transition: transform 0.3s ease; - 不要对容器加 transform，否则裁剪区域跟着动，就不是“局部”了
聚焦效果靠 transform-origin 控制放大中心点
默认 transform: scale() 以元素中心为原点，但“聚焦”常需以鼠标位置为中心——纯 CSS 无法动态读取鼠标坐标，所以实际能做的“聚焦”是**模拟常用焦点位置**：比如人脸区域、产品按钮区。这时用 transform-origin 手动指定原点更可控。
例如想让图片上半部内容被放大（模拟看眼睛），就把原点设在 50% 30%；想突出右下角 logo，就设 85% 85%。注意值单位只能是百分比或像素，不能用 left top 这类关键字（它们不被支持）。
立即学习“前端免费学习笔记（深入）”；
-
transform-origin: 50% 30%;表示以宽50%、高30%处为缩放中心 - 该属性必须和
transform: scale()写在同一元素上，且写在 scale 前面才生效 - 如果容器有
border-radius，放大后边缘可能露白边，建议容器也加overflow: hidden再包一层
移动端 Safari 的 transform 兼容性坑
iOS 15.4 之前，Safari 对 transform 在 <img> 上的硬件加速支持不稳定，尤其配合 object-fit: cover 时容易出现闪烁、错位或放大后模糊。这不是 bug，是渲染管线未触发 GPU 加速。
绕过方式很简单：强制开启硬件加速，加一行 will-change: transform; 或 transform: translateZ(0);。但别滥用——只加在悬停态，避免常驻消耗性能。
- 推荐写法：
img:hover { transform: scale(1.3) translateZ(0); } - 不要给容器加
will-change，它会提前占用图层资源，反而拖慢滚动 - Android Chrome 和新版 Edge 没这个问题，但加了也无害
用 clip-path 做非矩形局部放大（比如圆形聚焦）
如果需求是“只放大中间一个圆圈区域，周围虚化或隐藏”，transform 就不够用了。此时得用 clip-path 配合伪元素遮罩，实现视觉上的“焦点透镜”效果。
原理是：容器设两层，底层是原图，顶层是带圆形 clip-path 的同图放大版，再加个半透明遮罩层盖住外围。缺点是多一层 DOM 或伪元素，且 clip-path 的路径需按容器尺寸算好比例。
- 示例关键代码：
.zoom-container::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.3); clip-path: circle(60px at 50% 50%); } - 放大图层需
z-index: 1，且clip-path必须和transform-origin对齐，否则圆心和放大中心错开 - IE 完全不支持
clip-path，如需兼容，只能降级为矩形裁剪
transform-origin 值差 5%，焦点就偏出关键区域；而移动端那个 translateZ(0)，漏掉就等于在 iPhone 上白忙活。 
