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.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
Sprache wählen
Thema wählen
© 2025 ReadyTools. Alle Rechte vorbehalten.