CSS transform

Die CSS-Eigenschaft transform ermöglicht es, Elemente zu drehen, zu skalieren, zu verschieben oder zu kippen. Damit lassen sich dynamische und visuelle Effekte erzielen, ohne die tatsächliche Größe oder Position eines Elements zu ändern.

Einfaches Beispiel für transform

Im folgenden Beispiel drehen wir eine Box im Hover-Zustand um 45 Grad. Mit transition wird die Drehung allmählich ausgeführt.

Das Beispiel zeigt die Verwendung von rotate(), um ein Element um einen angegebenen Winkel zu drehen.

Die wichtigsten Funktionen von transform

Mit transform können Elemente auf verschiedene Weise verändert werden: drehen, skalieren, verschieben und kippen. Diese lassen sich auch kombinieren, um komplexe Effekte zu erzielen.

Funktion	Beschreibung
rotate()	Dreht das Element um einen bestimmten Winkel (z. B. rotate(45deg)).
scale()	Skaliert das Element größer oder kleiner (z. B. scale(1.5)).
translate()	Verschiebt das Element entlang der X- und Y-Achse (z. B. translate(50px, 20px)).
skew()	Kippt das Element entlang der X- und Y-Achse (z. B. skew(20deg, 10deg)).

Tipps zur Verwendung von transform

transform ist ein leistungsstarkes Werkzeug zur visuellen Manipulation von Elementen. Hier einige Tipps:

Kombiniere transform mit transition oder Animationen für flüssige Bewegungen.
Verwende die Eigenschaft transform-origin, um den Dreh- oder Skalierungspunkt festzulegen.
Denke daran, dass transform das Layout um das Element nicht beeinflusst, sondern nur die visuelle Darstellung.