So passen sie zusammen: Transformieren, Übersetzen, Rotieren, Skalieren und Verschieben

Firefox 72 war der erste mit „unabhängigen Transformationen“. Das heißt, anstatt Transformationen kombinieren zu müssen, wie z. B.

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

…können wir machen

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

Das ist äußerst nützlich, da das ständige *Wiederholen* anderer Transformationen, wenn man nur eine einzige ändert, um sie nicht zu entfernen, mühsam und fehleranfällig ist.

Aber es gibt hier einige Nuancen zu beachten, und Dan Wilson geht ins Detail.

Kleine Dinge, die man wissen sollte

• Unabhängige Transformationen geschehen *zuerst*. Die transform-Eigenschaft kommt zuletzt und stapelt sich auf das, was bereits geschehen ist, was verwirrend sein kann¹.
• Sie alle teilen sich denselben transform-origin.
• Die offset-*-Eigenschaften verschieben/rotieren Elemente ebenfalls effektiv. Diese geschehen *nach* den unabhängigen Transformationen und *vor* transform.