Translate, Rotate und Scale
Verschieben Sie Elemente mit translate(), drehen Sie sie mit rotate() und ändern Sie ihre Größe mit scale().
Translate, Rotate und Scale ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Die Eigenschaft transform
transform wendet visuelle 2D- und 3D-Transformationen auf Elemente an: Verschieben, Drehen, Skalieren und Verzerren. Transformationen erfolgen nach dem Layout — sie beeinflussen keine benachbarten Elemente.
translate()
Verschiebt ein Element aus seiner aktuellen Position. Argumente: Verschiebung in x- und y-Richtung.
<div class="card demo-active">Card</div>
<div class="wrap"><div class="centered">Centered</div></div>translateX() translateY() translateZ()
Einzelne Achsenfunktionen zur besseren Übersicht:
<div class="slide-in active">Slide panel</div>rotate()
Dreht ein Element um einen bestimmten Winkel. Positive Werte drehen im Uhrzeigersinn.
<span class="icon demo-active">➤</span>
<span class="spinner">➤</span>scale()
Skaliert ein Element gleichmäßig oder achsenweise. Werte kleiner als 1 verkleinern es, Werte größer als 1 vergrößern es.
<button class="btn demo-active">Button</button>
<div class="thumb demo-active">Thumb</div>scaleX() und scaleY()
Skalieren Sie unabhängig auf einer Achse:
<div class="logo">LOGO</div>Transformationen kombinieren
Mehrere Transformationsfunktionen werden der Reihe nach (von rechts nach links) angewendet. Die Reihenfolge beeinflusst das Ergebnis.
<div class="card demo-active">Card</div>Transformationsursprung
transform-origin legt den Dreh- und Skalierungsmittelpunkt fest. Standardmäßig ist dies die Mitte (50% 50%).
<div class="card demo-active">Card</div>Einzelne Transformationseigenschaften
Modernes CSS ermöglicht es, einzelne Transformationsfunktionen als separate Eigenschaften festzulegen:
<div class="card demo-active">Card</div>Übergänge mit Transformationen
Transform ist eine von zwei von der GPU zusammengesetzten Eigenschaften. Animieren Sie sie für flüssige, performante Effekte immer mit transition:
<div class="card demo-active">Card</div>translate() im Vergleich zu top/left
Bevorzugen Sie für Animationen immer transform: translate() gegenüber top/left. Transform wird von der GPU zusammengesetzt, während top/left in jedem Frame eine Neuberechnung des Layouts auslöst.
Schnelltest
Welche Transformationsfunktion spiegelt ein Element horizontal, ähnlich wie beim Umdrehen einer Karte?
Zusammenfassung
transform verschiebt, dreht und skaliert Elemente nach dem Layout, ohne den umgebenden Inhalt zu beeinflussen. Verwenden Sie translate() für Verschiebungen, rotate() für Drehungen und scale() zum Ändern der Größe. Verketten Sie mehrere Funktionen in einer Deklaration. Modernes CSS unterstützt einzelne Transformationseigenschaften. Animieren Sie sie für eine von der GPU zusammengesetzte, performante Darstellung immer mit Übergängen.
Lerne CSS mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 40
- Lektionen
- 159
Häufig gestellte Fragen
Ist die Lektion „Translate, Rotate und Scale“ kostenlos?
Ja — der vollständige Text von „Translate, Rotate und Scale“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Translate, Rotate und Scale“?
Verschieben Sie Elemente mit translate(), drehen Sie sie mit rotate() und ändern Sie ihre Größe mit scale(). Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Translate, Rotate und Scale“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Translate, Rotate und Scale
- Skew- und Matrix-Transforms
- Transformationsursprung und Perspektive
- 3D-Transforms: rotateX, rotateY, translateZ