CSS-Transformationen kombinieren

[Rolf B]

Hallo Gunnar,

Wenn du Verschiebung und Skalierung kombinieren willst, müsstest du das in einer transform-Deklaration tun...

Man sollte hier darauf hinweisen, dass die Elemente eines Transforms von hinten nach vorne angewendet werden. Und diese Elemente folgen nicht dem Kommutativgesetz!

Heißt:

transform: translate(0, 100px) scale(2); skaliert das Element zunächst an Ort und Stelle (je nach transform-origin, natürlich) und schiebt dann das Skalierungsergebnis (das Skalat?!) 100px entlang der Y-Achse. Also nach unten.

transform: scale(2) translate(0, 100px); verschiebt das Element zunächst um 100px entlang der Y-Achse. Der Transform-Origin wird aber nicht mitverschoben, deshalb verdoppelt der scale(2) auch den Translate-Vektor.

Nutzt man die CSS Eigenschaften scale, translate und rotate statt der Transform-Funktionen, dann

• gibt man die Flexibilität auf, die Reihenfolge der Operationen bestimmen zu können. Die CSS Eigenschaften wenden den translate zuletzt an..
• hat man weniger Kopfschmerzen, dass der Kerl schon wieder am langen Arm rotiert hat statt an Ort und Stelle, bloß weil man das rotate vor den translate geschrieben hat.

Das steht in der Spec - wie so oft - missverständlich: CSS Transforms 2. Da ist eine Reihenfolge aufgeführt, wie die resultierende Transformationsmatrix gebildet wird und schön nach 1,2,3,4,5 durchnummeriert, aber der Lineare Algebrant weiß, dass die zuletzt hinzumultiplizierte Transformation als erstes ausgeführt wird.

Zusammengefasst wird diese Reihenfolge eingesetzt, wenn transformiert wird:

1. Element um den negierten transform-origin Vektor schieben, damit der gewünschte Origin im (0,0,0) Punkt steht (Lineare Algebranten wissen, weshalb. Für den Rest: Isnumalso!)
2. transform-Funktionen von rechts nach links anwenden
3. eine offset-Transformation hinzufügen
4. scale-Eigenschaft anwenden
5. rotate-Eigenschaft anwenden
6. translate-Eigenschaft anwenden
7. Element um den transform-origin Vektor zurückschieben, damit es so aussieht, als hätte das alles relativ zum transform-origin stattgefunden.

Rolf