Verschieben, skalieren, drehen, neigen: Transformationen verändern die Darstellung eines Elements, ohne das Layout neu zu berechnen.
- Transform (verschieben, skalieren, rotieren)
Eigenschaft, die ein Element verschiebt, skaliert, dreht oder neigt, ohne seinen Platz im Layout zu verändern.
Beispiel: „Ein Transform verschiebt nur die Darstellung, der Platz bleibt, wo er war.“
Die Funktionen
transform: translateY(-4px);
transform: scale(1.05);
transform: rotate(45deg);
transform: translateY(-4px) scale(1.02);Mehrere lassen sich kombinieren und werden von links nach rechts angewendet; die Reihenfolge ändert das Ergebnis. Der Bezugspunkt liegt in der Mitte und lässt sich über transform-origin verschieben.
Warum sie für Bewegung taugen
Der Browser kann Transformationen und Transparenz auf der Grafikkarte berechnen, ohne das Layout neu aufzubauen. Eine Bewegung über transform läuft deshalb flüssig, während dieselbe Bewegung über top oder margin ruckelt.