它们如何协同工作：Transform、Translate、Rotate、Scale 和 Offset

Firefox 72 最早推出了“独立变换”。也就是说，无需像这样组合变换：

.el {
  transform: translate(10px, 10px) scale(0.95) rotate(10deg);
}

…我们可以这样做

.el {
  rotate: 10deg;
  scale: 0.95;
  translate: 10px 10px;
}

这非常有用，因为在更改单个变换时必须重复其他变换，否则将其删除，这既繁琐又容易出错。

但这里有一些细微差别需要了解，Dan Wilson 深入探讨了这一点。

需要了解的小细节

• 独立变换首先发生。transform 属性最后发生，并叠加在已完成的操作之上，这可能会令人困惑¹。
• 它们都共享相同的 transform-origin。
• offset-* 属性也有效地移动/旋转元素。这些操作发生在独立变换之后以及 transform 之前。