transform 2D

Mit transform veränderst du die visuelle Darstellung eines Elements, ohne das Layout zu beeinflussen. Du kannst Elemente verschieben (translate), drehen (rotate), skalieren (scale) oder verzerren (skew), alles rein visuell. Das Element behält seinen ursprünglichen Platz im Dokumentfluss, nur die gerenderte Darstellung ändert sich. Transformationen lassen sich kombinieren und sind GPU-beschleunigt, was sie zur ersten Wahl für performante Animationen und Hover-Effekte macht. Mit transform-origin bestimmst du den Bezugspunkt der Transformation.

Steckbrief transform 2D

Syntax: transform: <funktion> [<funktion>]*
Initialwert: none
Vererbt: Nein
Animierbar: Ja

Kategorie: Transformationen
Werte: 15
Beispiele: 5
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 15.02.2026

Grundlagen

CSS-Transformationen verändern nur die visuelle Darstellung, der eigentliche Platz im Layout bleibt unverändert. Wenn du ein Element mit translate verschiebst, fließt der nachfolgende Inhalt nicht nach, als wäre das Element noch an seiner Ursprungsposition. Deshalb eignen sich Transformationen perfekt für Animationen und Hover-Effekte, weil sie keinen Reflow auslösen.

Alle 2D-Transformationsfunktionen arbeiten in einem zweidimensionalen Koordinatensystem: die X-Achse zeigt nach rechts, die Y-Achse nach unten. Der Ursprungspunkt (0, 0) liegt standardmäßig in der Mitte des Elements: das ist der Dreh- und Angelpunkt für Rotationen und Skalierungen.

Mehrere Transformationen kannst du in einer einzigen transform-Deklaration kombinieren. Die Reihenfolge ist dabei wichtig: transform: rotate(45deg) translate(100px) ergibt ein anderes Ergebnis als transform: translate(100px) rotate(45deg), weil jede Funktion das Koordinatensystem für die nächste verändert.

Syntax & Werte

15 Werte

Verschieben (translate)

Wert	Beschreibung	Beispiel
`translateX(x)`	Verschiebt das Element horizontal. Positive Werte nach rechts, negative nach links.	transform: translateX(50px);
`translateY(y)`	Verschiebt das Element vertikal. Positive Werte nach unten, negative nach oben.	transform: translateY(-20px);
`translate(x, y)`	Verschiebt in beide Richtungen gleichzeitig. Zweiter Wert optional (Standard: 0).	transform: translate(50px, -20px);

Drehen (rotate)

Wert	Beschreibung	Beispiel
`rotate(winkel)`	Dreht das Element um den Mittelpunkt. Positive Werte im Uhrzeigersinn, negative gegen den Uhrzeigersinn.	transform: rotate(45deg);

Skalieren (scale)

Wert	Beschreibung	Beispiel
`scaleX(faktor)`	Skaliert nur horizontal. 2 = doppelt so breit, 0.5 = halb so breit.	transform: scaleX(1.5);
`scaleY(faktor)`	Skaliert nur vertikal.	transform: scaleY(0.8);
`scale(x, y)`	Skaliert in beide Richtungen. Ein Wert = gleichmäßig skalieren.	transform: scale(1.2);

Verzerren (skew)

Wert	Beschreibung	Beispiel
`skewX(winkel)`	Verzerrt horizontal. Positive Werte neigen nach links, negative nach rechts.	transform: skewX(15deg);
`skewY(winkel)`	Verzerrt vertikal.	transform: skewY(5deg);
`skew(x, y)`	Verzerrt in beide Richtungen gleichzeitig.	transform: skew(15deg, 5deg);

Matrix

Wert	Beschreibung	Beispiel
`matrix(a, b, c, d, tx, ty)`	Kombiniert alle 2D-Transformationen in einer 2×3-Matrix. Wird hauptsächlich von Tools und Bibliotheken generiert.	transform: matrix(1, 0, 0, 1, 50, 0);

transform-origin

Wert	Beschreibung	Beispiel
`center`	Mittelpunkt des Elements (Standard).	transform-origin: center;
`top left \| top right \| bottom left \| bottom right`	Ecken des Elements als Bezugspunkt.	transform-origin: top left;
`<länge> <länge>`	Exakte Position in Pixeln oder anderen Einheiten.	transform-origin: 0 0;
`<prozent> <prozent>`	Position relativ zur Elementgröße. 0% 0% = oben links, 100% 100% = unten rechts.	transform-origin: 50% 50%;

Beispiele

5 Beispiele

Elemente werden beim Hover verschoben. translate ist GPU-beschleunigt und löst keinen Reflow aus, perfekt für Hover-Effekte.

Translate-Varianten

.box-1:hover { transform: translateX(20px); }
.box-2:hover { transform: translateY(-15px); }
.box-3:hover { transform: translate(10px, -10px); }

<div class="translate-demo">
<div class="t-box">translateX</div>
<div class="t-box">translateY</div>
<div class="t-box">translate XY</div>
</div>

Elemente drehen sich beim Hover um ihren Mittelpunkt. Positive Werte drehen im Uhrzeigersinn.

Rotate-Varianten

.box-1:hover { transform: rotate(45deg); }
.box-2:hover { transform: rotate(180deg); }
.box-3:hover { transform: rotate(-90deg); }

<div class="rotate-demo">
<div class="r-box">45°</div>
<div class="r-box">180°</div>
<div class="r-box">-90°</div>
</div>

Elemente vergrößern sich beim Hover. scale eignet sich für Button-Feedback und Card-Interaktionen.

Scale-Hover auf Cards

.card {
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.08);
}

<div class="scale-demo">
<div class="s-card">
  <h4>Card A</h4>
  <p>scale(1.08)</p>
</div>
<div class="s-card">
  <h4>Card B</h4>
  <p>scale(1.08)</p>
</div>
<div class="s-card">
  <h4>Card C</h4>
  <p>scale(1.08)</p>
</div>
</div>

Mehrere Funktionen in einer transform-Deklaration erzeugen komplexe Effekte. Die Reihenfolge beeinflusst das Ergebnis.

Kombinierte Transforms

.box-1:hover {
  transform: rotate(10deg) scale(1.15);
}

.box-2:hover {
  transform: translateY(-10px) rotate(-5deg) scale(1.05);
}

<div class="combo-demo">
<div class="combo-box">rotate + scale</div>
<div class="combo-box">translate + rotate + scale</div>
</div>

Der Drehpunkt bestimmt, um welchen Punkt das Element rotiert. Standard ist die Mitte, aber du kannst jede Ecke oder Position wählen.

transform-origin Vergleich (gelber Punkt = Drehpunkt)

.box-1 {
  transform-origin: center; /* Standard */
}

.box-2 {
  transform-origin: top left;
}

.box-3 {
  transform-origin: bottom right;
}

.box:hover {
  transform: rotate(45deg);
}

<div class="origin-demo">
<div class="origin-wrap">
  <div class="origin-box o-center">center</div>
  <div class="origin-label">center</div>
</div>
<div class="origin-wrap">
  <div class="origin-box o-top-left">top left</div>
  <div class="origin-label">top left</div>
</div>
<div class="origin-wrap">
  <div class="origin-box o-bottom-right">btm right</div>
  <div class="origin-label">bottom right</div>
</div>
</div>

Barrierefreiheit

Transformierte Elemente behalten ihre Position im Accessibility-Tree: ein visuell verschobenes Element wird von Screenreadern an seiner ursprünglichen DOM-Position vorgelesen. Wenn du Elemente mit translate außerhalb des sichtbaren Bereichs verschiebst, bleiben sie für Screenreader trotzdem vorhanden, was verwirrend sein kann.

Respektiere prefers-reduced-motion für animierte Transformationen. Nutzer mit vestibulären Störungen können durch rotierende oder sich schnell bewegende Elemente Schwindel bekommen:

@media (prefers-reduced-motion: reduce) {
  * {
    transform: none !important;
    transition-duration: 0.01ms !important;
  }
}

Skalierte Elemente (scale) können Text unleserlich machen, wenn sie zu klein skaliert werden. Stelle sicher, dass interaktive Elemente auch nach der Transformation eine ausreichende Touch-Target-Größe von mindestens 44×44px behalten.

Häufige Fehler

5 Punkte

transform auf Inline-Elemente wie <span> oder <a> anwenden: Inline-Elemente ignorieren transform. Setze display: inline-block oder display: block, damit es funktioniert.
Die Reihenfolge der Funktionen ignorieren. rotate(45deg) translate(100px) verschiebt entlang der rotierten Achse, translate(100px) rotate(45deg) verschiebt zuerst horizontal und dreht dann.
transform: translate() und transform: rotate() getrennt deklarieren: die zweite Deklaration überschreibt die erste. Kombiniere sie in einer: transform: translate(50px) rotate(45deg).
Zu aggressive scale-Werte bei Hover. scale(1.5) sieht bei kleinen Icons okay aus, bei großen Cards wirkt es übertrieben. Halte Hover-Scales bei 1.02 bis 1.1 für subtile Effekte.
Vergessen, dass transformierte Elemente einen neuen Stacking-Context erzeugen. Das kann z-index-Reihenfolgen unbeabsichtigt verändern.

Browser-Kompatibilität

5 von 5

transform und transform-origin werden von allen modernen Browsern vollständig unterstützt. Die individuellen Properties translate, rotate und scale (ohne transform-Wrapper) sind ab 2022 in allen Browsern verfügbar.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

transform funktioniert in HTML-Emails kaum. Nur Apple Mail und Thunderbird unterstützen es zuverlässig.

Apple Mail

Komplett
Gmail

Keine

transform wird komplett entfernt
Outlook

Keine

Kein Support für CSS transform
Thunderbird

Komplett
Yahoo Mail

Keine

transform wird ignoriert

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da