transform 2D

Zuletzt aktualisiert am 15. Februar 2026

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.

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

Verschieben (translate)

Drehen (rotate)

Skalieren (scale)

Verzerren (skew)

Matrix

transform-origin

Beispiele

Translate-Verschiebung

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

.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>

Rotate-Drehungen

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

.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>

Scale-Hover

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

.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>

Kombinierte Transformationen

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

.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>

transform-origin Vergleich

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

.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

• 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

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.

Email-Kompatibilität

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

Verwandte Eigenschaften