transform-origin 的默认值是 50% 50% 0；它接受 1～3 个参数（x y z），z 仅在 3D 中生效；支持关键字、长度、百分比及混合写法，且均相对于元素自身宽高；需注意 inline 元素需设尺寸或 display 才能准确生效。
transform-origin 的默认值是什么
不设置 transform-origin 时，浏览器默认用元素盒模型的中心点：即 50% 50% 0（x y z）。这意味着 rotate(45deg) 总是绕中心转——哪怕你想让它绕左上角、底部中点或某个图标内部的螺丝孔位置转，都得显式改这个值。
怎么写合法的 transform-origin 值
它接受 1～3 个参数，顺序固定为 x y z，z 只在 3D 变换中生效，日常旋转基本只调前两个：
- 关键字：
left/center/right和top/center/bottom组合，如transform-origin: top left - 长度单位：
transform-origin: 20px 10px（从左上角起算） - 百分比：
transform-origin: 0% 100%（等价于bottom left） - 混合写法也行：
transform-origin: right 1em（x 用 right，y 用 1em 向下偏移）
注意：百分比和长度单位都是相对于元素自身宽高计算的，不是父容器。
旋转时锚点没动？检查这些地方
常见现象：写了 transform-origin: bottom center，但元素还是像在飘一样绕中心转。原因往往不是语法错，而是：
- 元素没有明确尺寸（比如纯文字 inline 元素），
transform-origin会按内容盒（content box）计算，结果不可控；加display: inline-block或设width/height再试 - CSS 动画或 transition 中，
transform-origin默认不参与过渡（它本身不是可动画属性），想让它随状态变化，必须显式加到transition里：transition: transform 0.3s, transform-origin 0.3s - 父元素设置了
overflow: hidden，而旋转后部分超出裁剪区——看起来像“锚点失效”，其实是被截了，可临时加outline: 1px solid red看真实边界
transform-origin 对 3D 旋转的影响更敏感
在 rotateX 或 rotateY 场景下，transform-origin 的 y/z 值会直接决定翻转轴的位置。比如一个卡片翻转：transform: rotateY(180deg)，若设 transform-origin: center top，它就像书本沿顶部边缘向上翻；若设 center bottom，就变成从下往上掀。
这时候 z 轴值（第三个参数）也不能忽略：如果卡片有 transform: translateZ(20px) 抬高，再设 transform-origin: 50% 50% -10px，锚点就实际落在卡片前方 10px 处，旋转弧线会明显外扩——这种细节在做 3D 卡片悬停时很容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
