CSS Transform: Leitfaden für 2D- und 3D-Effekte

Mit der Eigenschaft css transform kannst du ein Element visuell verschieben, drehen, skalieren und scheren, ohne den Platz zu verändern, den es einnimmt. Eine Karte beim Hover leicht vergrößern, ein Menü von der Seite einschieben oder ein Element in 3D umklappen: Nahezu all diese Effekte basieren auf dieser einen Eigenschaft. Das Beste daran: Richtig eingesetzt lösen diese Transformationen keine Neuberechnung des Layouts im Browser aus, weshalb sie das Mittel der Wahl für flüssige Animationen mit 60 fps sind.

Was macht transform eigentlich?

Wenn du transform auf ein Element anwendest, verschiebt der Browser dessen gerendertes Abbild. Sein ursprüngliches Kästchen im Dokumentfluss bleibt an Ort und Stelle: Nachbarelemente rücken nicht, die Seite wird nicht neu umbrochen. Das unterscheidet sich grundlegend vom Umpositionieren mit margin oder top, die eine Layout-Neuberechnung erzwingen, während transform nur die Kompositionsphase betrifft.

Du kannst mehrere Funktionen in einer Zeile verketten, getrennt durch Leerzeichen. Die Reihenfolge ist wichtig, weil jede Funktion das Koordinatensystem der nächsten verändert:

.karte {
  transform: translateX(20px) rotate(8deg) scale(1.1);
}

translate: das Verschieben

translate() verschiebt ein Element entlang der horizontalen und vertikalen Achse. Es gibt translateX(), translateY() und die Form mit zwei Werten translate(x, y). Prozentwerte beziehen sich auf die eigene Größe des Elements, was zum Zentrieren ungemein praktisch ist:

.mitte {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Hier wird das Element zunächst so positioniert, dass seine obere linke Ecke in der Mitte liegt, dann zieht translate(-50%, -50%) es um die Hälfte seiner eigenen Breite und Höhe zurück und zentriert es perfekt. Ein Klassiker, der immer noch sehr nützlich ist.

rotate und scale

rotate() dreht ein Element standardmäßig um seinen Mittelpunkt; den Wert gibst du in deg, rad oder turn an (1turn = 360 Grad). Positive Werte drehen im Uhrzeigersinn.

scale() vergrößert oder verkleinert ein Element. scale(1.2) vergrößert beide Achsen um 20 %; scale(2, 0.5) verdoppelt die Breite und halbiert die Höhe. Der Wert 1 ist die Originalgröße, 0 lässt das Element vollständig verschwinden.

.button {
  transition: transform 0.2s ease;
}
.button:hover {
  transform: scale(1.05);
}

Es gibt auch skew(), das das Element entlang der Achsen schert. In der Praxis wird es seltener verwendet als translate, rotate und scale, ist aber für dekorative Bänder und kursivartige Effekte nützlich.

transform-origin: der Ankerpunkt der Transformation

All diese Funktionen arbeiten relativ zu einem Ursprungspunkt. Der Standard ist 50% 50%, also der Mittelpunkt des Elements. Mit transform-origin kannst du ihn ändern:

.fahne {
  transform-origin: left center;
  transform: rotate(15deg);
}

In diesem Beispiel schwingt das Element von seiner linken Kante wie eine Fahne. Das Setzen von transform-origin ist unerlässlich, um ein Dropdown aus einer Ecke wachsen zu lassen oder einen Zeiger um seine Basis zu drehen.

3D-Transformationen und perspective

Interessant wird es, sobald du eine dritte Achse hinzufügst. rotateX(), rotateY(), rotateZ() und translateZ() bewegen das Element in die Tiefe. Damit 3D aber wirklich „tief" wirkt, musst du eine perspective definieren; sonst sieht die Transformation flach aus.

perspective lässt sich auf zwei Arten angeben: als CSS-Eigenschaft am Elternelement, das die 3D-Elemente enthält, oder als Funktion innerhalb von transform. Sie ans Elternelement zu setzen ist vorzuziehen, damit Geschwisterelemente dieselbe Szene teilen:

.szene {
  perspective: 800px;
}
.szene:hover .seite {
  transform: rotateY(180deg);
}

Genau das ist der „Flip-Card"-Effekt, der beim Hover die Rückseite einer Karte zeigt. transform-style: preserve-3d am Container hinzuzufügen hält verschachtelte Kinder im 3D-Raum, statt sie abzuflachen. Und backface-visibility: hidden blendet die Rückseite einer Fläche aus und hält Flip-Effekte sauber.

Performance: Warum transform bevorzugt wird

Um ein Frame zu zeichnen, durchläuft der Browser mehrere Phasen: Layout (Geometrie berechnen), Paint (Pixel füllen), Composite (Ebenen zusammenfügen). Das Animieren von width, top oder margin löst bei jedem Frame erneut das Layout aus, was teuer ist und zu Rucklern führt. Das Animieren von transform und opacity läuft dagegen nur in der Kompositionsphase und kann meist an die GPU ausgelagert werden.

• Verwende für Positionsanimationen translate statt left/top.
• Verwende für Größenanimationen scale statt width/height.
• Füge will-change: transform hinzu, um dem Browser im Voraus mitzuteilen, dass eine neue Ebene kommt — aber nur bei einer begrenzten Anzahl von Elementen, die tatsächlich animieren; übermäßiger Einsatz bläht den Speicher auf.

Denke aus Gründen der Barrierefreiheit an Nutzer mit vestibulärer Empfindlichkeit und dämpfe oder deaktiviere große Bewegungen innerhalb von @media (prefers-reduced-motion: reduce).

Häufige Fragen

Warum ist das Animieren von transform flüssiger als left/top?

Weil transform die Layout- und meist auch die Paint-Phase des Browsers überspringt und direkt auf der Kompositionsebene arbeitet, wo die GPU es beschleunigen kann. left/top hingegen berechnet das Layout bei jedem Frame neu, was niedrige fps verursacht.

Spielt die Reihenfolge mehrerer transform-Funktionen eine Rolle?

Ja. Funktionen werden von links nach rechts angewendet, und jede verändert das Koordinatensystem. rotate dann translate ergibt ein anderes Ergebnis als translate dann rotate; experimentiere mit der Reihenfolge, bis du den gewünschten Effekt erhältst.

Was ist nötig, damit translateZ sichtbar wird?

Ein perspective-Wert. Ohne definierte Perspektive projiziert sich die Bewegung entlang der Z-Achse flach auf den Bildschirm und es entsteht keine Tiefe. Setze perspective am Eltern-Container und stütze es mit transform-style: preserve-3d.

Möchtest du eine flüssige, performante Oberfläche? Ich richte CSS transform und moderne Animationstechniken in deinem Projekt richtig ein. Nimm Kontakt auf, um zusammenzuarbeiten.