如何理解MDN中transform-origin的原理及等价变换逻辑？

用户问题 #

我看到MDN上关于transform-origin的如下解释：

实际上，该属性会在元素的其他变换前后各添加一次平移变换。第一次平移将变换原点移至(0,0)处的“true origin”，然后应用其他变换（此时变换原点为(0,0)，变换围绕该点进行），最后执行反向平移，将变换原点移回原位置。

我不理解其中的“true origin”指什么？根据我的理解，文档想表达的似乎是如下等价关系：

.apply1 {
  transform-origin: 100% 100%;
  transform: rotate(45deg);
}

/* .apply1 等价于 .apply2*/

.apply2 {
  transform-origin: 0 0;
  transform: translate(100%, 100%) rotate(45deg) translate(-100%, -100%);
}

我总结的.apply1执行流程为：

1. 设置transform-origin: 0 0;
2. 按以下步骤添加变换：
   • 添加与transform-origin值一致的平移；
   • 应用所有rotate、scale等变换；
   • 添加与transform-origin值相反的平移

我通过验证发现.apply1和.apply2效果一致，推测我的理解是正确的，但我不明白为什么这些步骤会产生和“将钉子固定在右下角旋转正方形45度”相同的效果？我的数学基础薄弱，恳请解答相关疑问。

解答 #

1. 什么是“true origin”？ #

这里的“true origin”就是CSS变换体系里的默认基准原点——也就是元素自身坐标系的(0,0)点，对应元素的左上角。所有底层变换逻辑都是围绕这个坐标系原点展开的，transform-origin本质是通过平移来模拟“绕其他点变换”的效果。

2. 为什么三次变换等价于指定原点旋转？ #

拿你举的“右下角固定旋转”例子拆解：
假设我们有一个100px×100px的正方形，它的右下角相对于自身左上角的坐标是(100px,100px)。

• 第一步：translate(100%, 100%)
  这一步是把正方形的右下角（我们想要的旋转中心）平移到元素坐标系的原点(0,0)处。相当于把你要钉住的那个点，挪到了旋转操作的“机器中心”。
• 第二步：rotate(45deg)
  现在旋转是围绕坐标系原点(0,0)进行的，也就是刚才移过来的正方形右下角。这一步就等同于把正方形绕着“钉子”转了45度。
• 第三步：translate(-100%, -100%)
  旋转完成后，再把整个正方形平移回去，让原来的右下角（已经跟着旋转了）回到它原本在页面中的位置。

整个过程就像：先把要固定的点挪到旋转中心，转完之后再把整个图形移回原位，视觉上就和直接绕目标点旋转完全一致。

3. 用通俗逻辑理解（不用复杂公式） #

你可以把元素上的每个点想象成跟着整个元素做三次联动：

1. 集体向目标旋转中心的方向移动，让目标点和坐标系原点重合；
2. 绕原点完成旋转；
3. 集体向反方向移动相同距离，回到初始位置。
   平移不会改变元素内部点的相对位置，旋转的相对效果被完整保留，最后平移回去就还原了“绕目标点旋转”的视觉结果。

内容的提问来源于stack exchange，提问作者chengfengwang