CSS Transform

Mit transform lassen sich HTML-Elemente verschieben, drehen, skalieren oder neigen. Die Veränderung ist rein visuell: Die ursprüngliche Position des Elements im Dokumentenfluss bleibt bestehen.

transform wird häufig für kleine Animationen und visuelle Effekte eingesetzt, zum Beispiel für:

• Hover-Effekte
• das Drehen von Icons
• das Zoomen von Karten
• 3D-Effekte

---

Elemente transformieren

---

Vier Transform-Funktionen

• translate()Verschiebt ein Element entlang der X- und/oder Y-Achse
• scale()Vergrössert oder verkleinert ein Element (Skalierung)
• rotate()Dreht ein Element um die Z-Achse
• skew()Neigt ein Element in einem bestimmten Winkel

---

1. translate() – Verschieben

translate() verschiebt ein Element relativ zu seiner ursprünglichen Position.

• Werte: px | rem | em | %
• Negative Werte: werden akzeptiert

transform: translate(x, y);

Beispiel

transform: translate(50px, 0);     /* nach rechts */
transform: translate(0, -20px);    /* nach oben */
transform: translate(50%, 100%);

Varianten

translateX(50px)
translateY(20px)

---

2. scale() – Skalieren (vergrössern / verkleinern)

scale() vergrössert oder verkleinert ein Element zusammen mit seinem Inhalt und Rahmen.

• Werte: Nummer | %
• Negative Werte: sind möglich und können das Element spiegeln.

transform: scale(1.2);   /* 120% */
transform: scale(0.8);   /* 80% */

Unterschiedliche Achsen

transform: scaleX(1.5);
transform: scaleY(0.5);

---

3. rotate() – Drehen

rotate() dreht ein Element um seinen Drehpunkt. Standardmässig liegt dieser in der Mitte des Elements.

Häufige Einheiten

• degGrad – 360deg entspricht einer vollständigen Drehung
• turnUmdrehungen – 1turn entspricht einer vollständigen Drehung
• radRadiant – wird vor allem für mathematische Berechnungen verwendet – 3.1416rad entspricht ungefähr 180deg

Negative Werte drehen das Element in die entgegengesetzte Richtung.

transform: rotate(45deg);
transform: rotate(-90deg);

Einheiten

rotate(0.5turn)
rotate(1rad)

---

4. skew() – Neigen

skew() neigt ein Element entlang der X- und/oder Y-Achse, ohne es zu drehen.

• Werte: deg
• Negative Werte: sind möglich und drehen in die andere Richtung.
• Kann Texte schwer lesbar machen.

transform: skew(20deg, 10deg);

Einzeln:

skewX(20deg)
skewY(10deg)

---

Transform-Origin

transform-origin bestimmt den Ausgangspunkt einer Transformation – also den Dreh- und Skalierpunkt eines Elements. Besonders sichtbar ist das bei rotate(), scale() und skew(). Standardmässig liegt dieser Punkt in der Mitte.

transform-origin: center; /* Standard */

Beispiele

transform-origin: top left;
transform-origin: 50% 100%;
transform-origin: 0 0;

---

Transform kombinieren

Mehrere Transform-Funktionen können innerhalb einer Anweisung kombiniert werden. Die Reihenfolge beeinflusst das Ergebnis, weil eine Transformation das Koordinatensystem für die nächste verändert.

Reihenfolge vergleichen

.box-1 {
    transform: translateX(100px) rotate(45deg);
}

.box-2 {
    transform: rotate(45deg) translateX(100px);
}

Bei der zweiten Box wird entlang der bereits gedrehten X-Achse verschoben. Deshalb landen die beiden Boxen trotz identischer Werte an unterschiedlichen Positionen.

---

Einzelne Transform-Eigenschaften

translate, rotate und scale lassen sich auch als eigenständige CSS-Eigenschaften schreiben. Das ist besonders praktisch, wenn eine Transformation einzeln verändert oder animiert werden soll.

.element {
  translate: 50px 20px;
  rotate: 45deg;
  scale: 1.2;
}

---

3D-Transforms

Mit 3D-Transforms lassen sich Elemente nicht nur auf der Fläche, sondern auch räumlich um die X-, Y- und Z-Achse drehen.

• rotateX()Dreht das Element um die horizontale X-Achse
• rotateY()Dreht das Element um die vertikale Y-Achse
• rotateZ()Dreht das Element innerhalb der Fläche um die Z-Achse

transform: rotateY(45deg);

Perspektive

perspective bestimmt den Abstand zwischen der betrachtenden Person und der 3D-Szene. Ein kleiner Wert erzeugt eine stärkere räumliche Wirkung, ein grosser Wert lässt die Darstellung flacher erscheinen.

Wird perspective dem übergeordneten Element gegeben, erhalten dessen Kindelemente eine gemeinsame Perspektive.

.container {
    perspective: 800px;
}

Für ein einzelnes Element kann perspective() direkt innerhalb von transform verwendet werden.

.element {
    transform: perspective(800px) rotateY(45deg);
}

---

See the Pen Untitled by Intensivstation (@intensivstation) on CodePen.

---

Transform & Transition

transform bestimmt die visuelle Veränderung eines Elements. transition legt fest, wie der Wechsel zwischen zwei Zuständen abläuft. So lassen sich Elemente beim Hover fliessend vergrössern, drehen oder verschieben.

.box {
    transition: transform 0.3s ease;
}

.box:hover {
    transform: scale(1.1);
}

Mehr zu Dauer, Verzögerung und Timing-Funktionen findest du in der Transition-Lektion.

---

Kurz gesagt

• transform verändert ein Element visuell, ohne seine Position im Dokumentenfluss zu verändern.
• translate(), scale(), rotate() und skew() verschieben, skalieren, drehen oder neigen Elemente.
• transform-origin bestimmt den Ausgangspunkt der Transformation.
• Mehrere Transform-Funktionen lassen sich kombinieren – ihre Reihenfolge beeinflusst das Ergebnis.
• Mit transition lassen sich Transformationen fliessend animieren.

---

Verwandte Themen

• Intensivstation CodePen – Beispiele für Transformationen und Animationen.
• Transition – Zustandsänderungen fliessend darstellen.
• Animation – komplexe Bewegungsabläufe mit Keyframes gestalten.
• Animation Timeline – Animationen durch Scrollposition oder Sichtbarkeit steuern.

---