transform-origin 默认 center 但常需调整，它基于元素自身 border box 计算，错误设置会导致缩放/旋转视觉偏移；应结合 transform 定位避免 top/left 混用，并注意全局 scale 对坐标系的影响。
transform-origin 不设对，动画一动就“飞走”——它不改位置，只改旋转/缩放的支点，但支点错位会导致视觉上严重偏移。
transform-origin 默认值是 center，但很多场景下它根本不是你想要的支点
比如一个 position: absolute 的 tooltip，用 top: 10px; left: 50%; 定位在按钮上方居中，再加 transform: scale(1.2); 做悬停放大。默认 transform-origin: 50% 50% 会让它以自身中心为原点放大，结果整个元素向下向右“飘”出原位——因为放大后中心还在原处，但左上角已经移位了。
- 缩放时想“锚定左上角不动”，就设
transform-origin: 0 0 - 想让图标绕按钮左上角旋转，别用
center，用transform-origin: 0 0 - 水平居中弹窗缩放时保持居中，应配
transform-origin: 50% 50%，且确保初始定位本身已居中（如left: 50%; top: 50%; transform: translate(-50%, -50%)） - 若父容器有
transform，子元素的transform-origin仍按子元素自身盒模型计算，不受父级变形影响
scale 动画中 position + transform 混用容易引发双重偏移
常见错误写法：top: 50%; left: 50%; transform: scale(1.5);。这时浏览器先按 top/left 把元素左上角摆到视口中心，再以元素中心为原点放大——结果整个元素视觉中心会落到 (50% + 宽高一半 * 0.5) 的位置，明显偏移。
- 正确做法：用
transform: translate(-50%, -50%) scale(1.5)，把定位和缩放都交给transform链式处理 - 或彻底放弃
top/left，全用transform：初始设position: absolute; transform: translate(50vw, 50vh) translate(-50%, -50%) scale(1) - 避免在动画中同时修改
top和transform: scale()，否则偏移量叠加不可控
Vue/React 大屏适配中 transform: scale 导致地图、图表定位失效
可视化项目常对根容器用 transform: scale(calc(...)) 实现响应式缩放，但百度地图、ECharts 等依赖绝对坐标系的库会误判鼠标位置——event.clientX/Y 返回的是设备像素坐标，而地图内部仍按原始尺寸计算，导致点击缩放中心偏移。
- 临时解法：监听缩放因子，在事件处理器里手动校正坐标：
const x = e.offsetX / scale; - 更稳妥方式：不用全局
scale，改用width/height + font-size缩放，或用 CSS 自定义属性配合calc() - 若必须用
transform: scale，请确保地图容器本身transform: none，且不被带transform的父级包裹（否则会创建新层叠上下文并干扰 fixed 定位）
最易被忽略的一点：transform-origin 的百分比值，始终相对于**元素自身的 border box**，不是父容器，也不是视口。哪怕元素被 transform: translate 移动过，它的 transform-origin: 100% 100% 永远指向自己右下角，不会随位移改变——这点一旦误解，调试半天也找不到偏移源头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
