关键在于显式设置transform-origin以控制缩放中心，避免偏移跳动；需配合overflow:hidden、object-fit:cover及响应式媒体查询，确保预览区域稳定精准。
纯 CSS 实现悬停预览大图，关键不在“放大”，而在“放哪”——transform-origin 决定了缩放中心点，不设对会导致图片偏移、裁剪错位或悬停时突然跳动。
为什么 transform-origin 必须显式设置
默认值是 50% 50%（居中），但一旦容器有 padding、border 或父元素设置了 overflow: hidden，实际视觉中心就可能和计算中心不一致。尤其在响应式场景下，容器宽高随屏幕变化，居中缩放容易让关键区域（比如人脸、产品LOGO）被切掉。
- 不设
transform-origin：缩放以元素自身盒模型中心为基准，与鼠标位置无关，预览感弱 - 设成
left top或0 0：适合左上角固定锚点的卡片布局，但鼠标靠近右下角时放大后内容会“甩出”视口 - 设成
center center+ 配合translate动态微调：最可控，但需配合 JS 才能真正跟随鼠标
transform-origin 与 scale() 的组合陷阱
常见错误是只改 transform-origin 却忽略 overflow: hidden 和 object-fit 的协同。例如：
-
transform-origin: 100px 80px（像素值）在小屏下超出容器边界 → 缩放失效或触发滚动条 - 用百分比值（如
70% 30%）但父容器未设position: relative→ 原点计算基准错乱 - 缩放后图片尺寸变大，但容器没设
overflow: hidden→ 图片撑开布局，影响相邻元素
正确做法是：容器必须带 position: relative 和 overflow: hidden，图片用 object-fit: cover，transform-origin 优先用百分比（如 50% 50%），再按需微调。
响应式下如何保持预览区域稳定
移动端无 :hover，但部分安卓 Chrome 支持 :hover 伪类（仅限触屏后短暂生效）。真响应式方案要区分交互方式：
- 桌面端：用
.card:hover img { transform: scale(1.3); transform-origin: 50% 50%; } - 触屏设备（检测
@media (hover: none) and (pointer: coarse)）：关闭缩放，改用点击弹窗或长按触发 - 兼顾两者：给图片加
transition: transform 0.25s cubic-bezier(0.33, 1, 0.68, 1)，避免缩放生硬；同时用prefers-reduced-motion: reduce降级为淡入
注意：不要依赖 transform-origin 模拟“放大镜”效果——它只能控制缩放原点，无法实现局部区域采样+独立窗口渲染，那必须用 JS 计算坐标并更新 background-position。
容易被忽略的兼容性细节
transform-origin 在 Safari 旧版本（≤14.1）中对 flex 子项支持不稳定，若卡片用 display: flex 布局，缩放可能偏移。解决方案：
- 给图片外层再套一层
div，该层设position: relative，图片设position: absolute - 避免在
transform-origin中混用单位（如50% 20px），Safari 可能解析失败 - IE11 不支持
transform-origin的三参数语法（x y z），只用前两个
真正难的不是写出来，而是让缩放始终落在用户想看的位置——这要求你清楚知道每个百分比值对应的是哪个盒模型、哪个媒体查询断点、哪种 pointer 类型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
