transform-origin默认为50% 50% 0，即元素中心；其三个参数分别控制x、y、z轴偏移，常用前两个，支持数值、百分比及left/center/right、top/center/bottom等关键字组合，且不继承，仅作用于设置了transform的元素本身。
transform-origin 的取值逻辑和默认行为
默认情况下，transform-origin 是 50% 50% 0，也就是元素盒模型的正中心。旋转（rotate()）、缩放（scale()）等变换都围绕这个点发生。但实际开发中，你经常需要让它绕左上角转、绕底部中点转，甚至绕外部某点转——这时候就得显式改 transform-origin。
它的三个参数分别对应 x、y、z 轴偏移，常用的是前两个：
• 可用数值（如 10px、-20px）
• 可用百分比（如 0%、100%、25%）
• 可用关键字（left/center/right 和 top/center/bottom 组合）
• 注意：left 等价于 0%，center 等价于 50%，right 等价于 100%
常见旋转中心点写法与对应效果
别靠猜，直接记这几组高频组合：
-
transform-origin: top left;→ 绕左上角旋转（适合下拉菜单箭头翻转） -
transform-origin: bottom center;→ 绕底边中点旋转（适合卡片翻牌、下翻动画） -
transform-origin: 0 100%;→ 效果同上，但更明确表示“x=0, y=100%” -
transform-origin: 20px 30px;→ 绕距左 20px、距顶 30px 的点旋转（适合精确控制） -
transform-origin: right 20px;→ x 用关键字，y 用绝对值，x 从右边界算起（注意：此时right表示 x=100%，再加20px会向右偏出）
transform-origin 作用域和继承问题
transform-origin 不继承，只作用于**设置了 transform 的那个元素本身**。但它受父容器的 transform 影响——如果父元素有 transform（比如 translateZ(10px)），子元素的 transform-origin 坐标是相对于该父层的坐标系计算的，不是原始文档流。
容易踩的坑：
- 给一个已设
transform: rotate(10deg)的元素再加transform-origin，必须写在同一条规则里，否则可能被覆盖（CSS 层叠规则） - 使用
will-change: transform时，transform-origin必须提前声明，否则某些浏览器（尤其是旧版 Safari）可能不触发硬件加速或定位错乱 - Flex 或 Grid 容器里的子项，若用
transform-origin: center，实际中心是元素自身的 content box，不是 flex item 的对齐区域
调试 transform-origin 的实用技巧
看不见原点？加个临时视觉标记：
div {
position: relative;
}
div::before {
content: "";
position: absolute;
width: 6px;
height: 6px;
background: red;
border-radius: 50%;
/* 把伪元素定位到 transform-origin 所在位置 */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
或者更直接：打开浏览器开发者工具，在 Elements 面板里选中元素，勾选 “Show transform origin”（Chrome 110+ / Edge 110+ 支持，Firefox 需要手动开启 devtools.inspector.transform.visualizers）。
真正麻烦的是 z 轴偏移——transform-origin: 50% 50% -100px 看不见也难测，一旦设错会导致旋转轴“飘在空中”，动画失真。这种场景建议先用 2D 值调通，再逐步加 z 偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
