transform-origin决定旋转中心点，影响旋转后视觉坐标计算；默认为50% 50%，非左上角；需结合getBoundingClientRect与旋转矩阵手动换算或用伪元素标记法获取真实中心。
transform-origin 为什么会影响旋转后元素的坐标计算
元素用 transform: rotate() 旋转后，它的视觉位置变了，但 DOM 的几何边界（比如 getBoundingClientRect() 返回的 left/top）仍是基于未旋转时的原始盒模型。真正决定旋转“绕哪转”的，是 transform-origin —— 它不改变布局流，但彻底改变了旋转中心点，进而影响你手动算坐标时的参考原点。
常见误区是默认以左上角（0 0）为旋转中心去推算，结果偏差明显。比如一个宽高各 200px 的 div，设 transform-origin: center 旋转 45°，其实际旋转中心在自身中点，而非左上角；若按左上角算偏移，误差可达 ~141px（即 200×sin45°）。
-
transform-origin默认值是50% 50%（即center center），不是0 0 - 值支持像素（
10px 20px）、百分比（30% 70%）、关键词（top right），三者混合也合法（left 2em） - 该属性只对应用了
transform的元素生效，且必须写在transform之前（CSS 级联顺序不影响，但逻辑上它定义的是变换基准）
怎么拿到旋转后真实的视觉中心点坐标
不能直接读 getBoundingClientRect().center（不存在），得自己算。核心思路：先获取元素原始盒模型中心，再根据 transform-origin 偏移量和旋转角度，用二维旋转矩阵平移+旋转变换。
更实用的做法是绕过纯数学推导，用浏览器原生 API 获取“视觉渲染后”的位置：
- 用
element.getScreenCTM()（SVG 元素）或element.getBoundingClientRect()+ 手动补偿（仅适用于简单情况） - 推荐方案：创建一个临时不可见的
<canvas></canvas>，用ctx.setTransform()模拟相同transform和transform-origin，把元素中心点映射过去 - 最简鲁棒法：在元素内部加一个
position: absolute; width: 0; height: 0; transform: translate(-50%, -50%) rotate(-45deg)的伪中心标记，再用marker.getBoundingClientRect()读取其left/top
示例（用伪标记法）：
div.rotated {
transform: rotate(30deg);
transform-origin: 20px 30px;
}
div.rotated::before {
content: "";
position: absolute;
width: 0; height: 0;
transform: translate(-50%, -50%) translate(20px, 30px) rotate(-30deg);
}
然后查 div.querySelector('::before').getBoundingClientRect() 就是旋转后的“原点”视觉位置。
transform-origin 设置错误导致旋转抖动或错位的典型场景
最常出问题的是动态修改 transform 时没同步更新 transform-origin，尤其在响应式或动画中。例如：
- 父容器缩放（
scale(0.8)）后，子元素仍用transform-origin: 50% 50%，此时百分比是相对于缩放后的尺寸计算的，但开发者可能误以为是原始尺寸 - 用 JS 动态设置
style.transformOrigin = 'x y'，但x/y是字符串，漏写单位（如'50 50'被当50px 50px解析，而非50% 50%） - CSS 中写了
transform-origin: bottom right，但元素有border或padding，而你期望的“右下角”其实是 content-box 边缘，实际生效的是 border-box 角点
验证方法：给元素加 outline: 1px solid red，再叠加一个绝对定位的、transform: translate(-50%, -50%) 的小圆点，圆点中心应与旋转中心重合。
用 getBoundingClientRect() 配合 transform-origin 手动修正坐标的注意事项
如果必须手算（比如做拖拽吸附、碰撞检测），记住：修正公式不是简单的 “加旋转偏移”，而是要分三步走 —— 平移原点到 transform-origin、旋转、再平移回去。浏览器不会帮你做这三步。
- 先调
el.getBoundingClientRect()得到原始{left, top, width, height} - 根据
transform-origin值算出原点偏移量（如'30% 70%'→ox = width * 0.3, oy = height * 0.7） - 旋转后的新中心 =
{left + ox, top + oy}绕原点旋转 angle 后的坐标，再减去 ox/oy 偏移（矩阵运算） - 注意：CSS 的
rotate()是顺时针为正，而数学三角函数通常逆时针为正，别弄反符号
真正容易被忽略的是：这个计算只对单次静态 transform 有效。一旦元素还叠加了 scale、skew 或父级 transform，就必须提取完整 getComputedStyle(el).transform 矩阵，再分解或直接用 DOMMatrix 运算 —— 此时 transform-origin 已融入最终矩阵，不再单独可解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
