transform-origin 影响动画每一帧的变换基准点，只对应用了 transform 的元素生效，且必须直接设在该元素上；例如设为 0 0 可使旋转轴心精准落在元素自身 border box 左上角。
transform-origin 影响的是哪个动画阶段
transform-origin 不控制动画“是否执行”，只决定 rotate()、scale()、skew() 等基于坐标系变换的动画“绕哪转”“从哪缩”。它在动画每一帧都生效，但**只对应用了 transform 的元素起作用**，且必须写在触发动画的元素上（不是父容器）。
常见误解是把它当成“动画起点”，其实它和 animation-delay 无关；也有人误设在父级想控制子元素旋转中心——没用，子元素得自己设。
如何让旋转轴心精准落在图标左上角
默认 transform-origin: 50% 50% 是中心点。要锚定到左上角，直接写像素值或关键词：
svg .icon {
transform-origin: 0 0;
/* 或 */
transform-origin: top left;
/* 或 */
transform-origin: 0px 0px;
}注意：0 0 指的是该元素自身的 border box 左上角（含 border），不是视口或父容器。如果元素有 padding 或 margin，不影响 origin 定位——它只认自己的盒模型边界。
立即学习“前端免费学习笔记（深入）”；
- 用百分比（如
0% 0%）和像素/关键词效果一致，但百分比在响应式缩放时更稳定 - 如果元素用了
box-sizing: border-box，0 0仍指向 border 外边缘左上，不是 content 区域 - SVG 内部
transform-origin，但需确保它们被渲染为具有布局盒子的元素（通常需加transform: rotate(0)触发）
配合 @keyframes 实现非中心翻转动画
关键点：动画定义里不用写 transform-origin，它属于“样式属性”，必须提前在元素上声明，否则动画中所有 rotate() 都按默认中心计算。
@keyframes flipFromTopLeft {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.card {
transform-origin: 0 0;
animation: flipFromTopLeft 1s ease-in-out;
}
如果漏掉 transform-origin: 0 0 这行，哪怕 keyframes 里写 transform: rotate(360deg)，它依然绕中心转——CSS 动画不会继承 origin 值，也不会从 keyframes 里读取。
- 多个动画叠加时（比如同时 rotate + scale），
transform-origin对两者都生效 - 使用
will-change: transform可能影响 origin 渲染行为，建议只在必要时添加，且确认 origin 已正确定义 - 在 Safari 中，对 inline SVG 元素设
transform-origin有时需配合transform: translateZ(0)强制硬件加速才能生效
transform-origin 在 3D 动画里的 z 轴陷阱
当用 rotateX() 或 rotateY() 做 3D 旋转时，transform-origin 的第三个值 z 才起作用，例如：
.cube-face {
transform-origin: 50% 50% -50px;
transform: rotateY(45deg);
}这个 -50px 表示旋转轴心沿 z 轴向屏幕内偏移 50px，直接影响透视感。但问题在于：大多数浏览器不支持在 CSS 中用百分比表示 z 值（transform-origin: 50% 50% 50% 无效），必须用长度单位。
- z 值为负 = 向观察者方向（屏幕外）移动轴心，会让旋转看起来“更近、更大”
- 若未显式指定 z（如只写
50% 50%），浏览器按0处理，即轴心就在元素所在平面，3D 效果会变平 - 在
perspective容器内，z 值的实际视觉影响还取决于容器的perspective大小，小 perspective + 大负 z 容易导致元素翻转消失
自定义旋转轴心不是加个属性就完事，它和元素盒模型、坐标系层级、甚至浏览器对 3D 的实现细节都咬合紧密。最常出问题的地方，其实是忘了给目标元素单独设 origin，或者误以为它能跨层继承。
