根本原因是transform-origin未正确设置，浏览器默认以左上角为原点导致缩放偏移；应显式设为center center，并注意iOS Safari兼容性及定位冲突调试。
视频缩放后位置偏移，根本原因几乎总是 transform 的原点（transform-origin）没设对，而不是缩放本身出错。
为什么 transform: scale() 会让视频“跑偏”
浏览器默认以元素左上角（0% 0%）为 transform 原点。对 元素直接加 scale(1.2)，它会从左上角向外拉伸，导致右下部分溢出、视觉上“向右下偏移”。这不是位移，是锚点错位造成的错觉。
常见错误现象：video 看起来被切掉一块、父容器出现滚动条、点击区域和画面不匹配。
- 必须显式设置
transform-origin，通常用center center让缩放围绕中心发生 - 若父容器有
overflow: hidden，缩放后超出部分会被裁剪——这是预期行为，不是 bug -
scale()不影响文档流，但会影响getBoundingClientRect()返回的尺寸，JS 定位逻辑需同步调整
transform-origin 的取值与实际效果差异
transform-origin 支持关键字、百分比、像素值，但对 这类替换元素，推荐用语义明确的关键字组合。
立即学习“前端免费学习笔记（深入）”；
-
center center：最常用，缩放后保持居中，无偏移感 -
50% 50%：等价于center center，但可读性略差 -
left top/0 0：还原默认行为，缩放从左上发起，必然偏移 - 避免混用单位（如
50% top），部分浏览器解析不一致
示例：
video {
transform: scale(1.3);
transform-origin: center center; /* 关键！ */
}缩放 + 定位冲突时的调试技巧
当 video 已有 position: absolute 或 margin，再叠加 transform，容易因层叠上下文或渲染顺序引发定位跳变。
- 先移除所有
margin、top/left偏移，仅靠transform-origin和transform控制视觉位置 - 检查是否意外触发了
will-change: transform或backface-visibility，它们可能干扰合成层定位 - 用 Chrome DevTools 的 “Layers” 面板查看该
video是否被提升为独立图层，以及其transform应用后的实际 bounds - 若需精确像素对齐（如画中画场景），改用
width/height配合object-fit，而非transform
移动端 Safari 的兼容性注意点
iOS Safari 对 transform-origin 在 上的支持较晚（iOS 15.4+ 才稳定），旧版本可能出现原点失效、回退到左上角的问题。
- 降级方案：用
width和height设置固定尺寸，配合object-fit: cover模拟缩放效果 - 检测支持：可用
CSS.supports('transform-origin', 'center')判断，但注意 Safari 对该 API 的支持也有版本差异 - 避免在
video上同时使用transform和perspective，iOS 上易触发渲染异常
真正难的不是写对那行 transform-origin，而是意识到偏移从来不是缩放惹的祸，而是你没告诉浏览器“绕哪儿缩”。
