CSS Transform: translate, rotate, scale, skew – Elemente verschieben, drehen und skalieren, ohne das Layout zu berühren

Die Funktionen: translate, rotate, scale, skew

translate(x, y) verschiebt um Längen oder Prozent der eigenen Größe; translateX() und translateY() einzeln. rotate(30deg) dreht im Uhrzeigersinn. scale(1.2) vergrößert um 20 Prozent, scale(1, .5) nur eine Achse. skew() neigt. Alle wirken auf die gerenderte Box, nicht auf den Platz, den sie im Layout einnimmt – der Nachbar rückt nicht nach.

.karte:hover { transform: translateY(-4px) scale(1.02); }

Mehrere Funktionen: die Reihenfolge zählt

Mehrere Funktionen in einer Deklaration werden von links nach rechts angewandt, und die Reihenfolge ändert das Ergebnis: rotate(45deg) translateX(100px) verschiebt entlang der gedrehten Achse, translateX(100px) rotate(45deg) verschiebt erst waagerecht und dreht dann an Ort und Stelle. Seit 2022 gibt es die Einzeleigenschaften translate, rotate und scale, die unabhängig voneinander gesetzt und animiert werden – in fester Reihenfolge: erst translate, dann rotate, dann scale.

transform-origin: der Drehpunkt

Ausgangspunkt jeder Transformation ist die Mitte des Elements. transform-origin verschiebt ihn: top left dreht um die linke obere Ecke, 50% 100% um die Mitte der Unterkante – nötig für alles, was wie ein Pendel oder eine Klappe wirken soll.

3D: perspective, rotateX, translateZ

rotateX() und rotateY() kippen um die waagerechte und die senkrechte Achse, translateZ() holt näher an den Betrachter. Ohne perspective auf dem Elternelement bleibt das flach; mit perspective: 800px entsteht Tiefe. transform-style: preserve-3d lässt Kinder im selben Raum stehen, backface-visibility: hidden versteckt die Rückseite einer gedrehten Karte.

Die getrennten Eigenschaften

Neben der Sammeleigenschaft gibt es inzwischen translate, rotate und scale als eigene Eigenschaften. Der Nutzen ist nicht die kürzere Schreibweise, sondern die Unabhängigkeit: Zwei Regeln, die beide transform setzen, überschreiben einander vollständig, auch wenn die eine nur drehen und die andere nur verschieben wollte. Als getrennte Eigenschaften stören sie sich nicht.

Ihre Reihenfolge ist dabei fest vorgegeben – erst verschieben, dann drehen, dann skalieren, und erst danach kommt, was in transform steht. Diese Festlegung nimmt Freiheit und schafft Verlässlichkeit, denn genau die Reihenfolge ist bei der Sammeleigenschaft die häufigste Fehlerquelle. Für Animationen sind die getrennten Eigenschaften ohnehin die bessere Wahl: Eine Bewegung und eine Drehung lassen sich unabhängig voneinander mit eigener Dauer versehen, was mit einer einzigen Sammeleigenschaft nicht geht.

Was eine Transformation nebenbei auslöst

Ein Element mit einer Transformation ist mehr als ein verschobenes Element. Es erzeugt einen eigenen Stapelkontext, sodass die Stapelreihenfolge seiner Nachfahren nach außen abgeschlossen ist. Es wird zum Bezugsrahmen für absolut positionierte Nachfahren, auch wenn seine eigene Positionierung unverändert bleibt – und sogar für fest am Fenster verankerte, die dann nicht mehr am Fenster hängen. Und es bekommt vom Browser in der Regel eine eigene Ebene zum Zeichnen.

Diese Nebenwirkungen sind der Grund für zwei bekannte Fehlerbilder: eine Kopfzeile, die plötzlich mitrollt, weil weiter oben im Baum eine Animation eine Transformation setzt, und ein Text, der während einer Skalierung unscharf wird, weil die fertig gezeichnete Ebene vergrößert statt neu gerastert wird. Gegen das Zweite hilft, die Endgröße zu zeichnen und von dort aus zu verkleinern statt umgekehrt; gegen das Erste hilft nur, die Transformation an ein Element zu legen, das kein Vorfahr des betroffenen ist.

Wo eine Transformation nicht wirkt

Die Eigenschaft gilt für transformierbare Elemente, und das sind alle Block- und Inline-Block-Boxen sowie einige weitere – aber nicht die nicht ersetzten Inline-Elemente. Eine Betonung mitten im Satz lässt sich also nicht drehen, solange sie ein gewöhnliches Inline-Element bleibt; erst mit display: inline-block wird sie es. Das ist kein Versehen der Browser, sondern Absicht: Eine Inline-Box kann über mehrere Zeilen gebrochen sein, und für die einzelnen Bruchstücke gibt es keinen sinnvollen gemeinsamen Drehpunkt.

Auch Tabellenzeilen und -zellen sind ausgenommen, ebenso alles, was der Browser als Teil einer Tabellenstruktur behandelt. Wer eine Zeile hervorheben und dabei leicht vergrößern will, stößt genau hier an und muss die Wirkung mit anderen Mitteln erzeugen – über Farbe, Schatten oder einen inneren Kasten. Und schließlich wirkt eine Transformation nicht auf die Berechnung des Layouts: Die Nachbarn stehen weiter dort, wo sie ohne sie stünden.

Warum transform das Layout nicht berührt – und warum das zählt

Eine Transformation läuft nach dem Layout, in der Kompositionsphase. Der Browser muss nichts neu anordnen und nichts neu zeichnen, sondern verschiebt eine fertige Ebene. Deshalb sind transform und opacity die Eigenschaften, die sich in Transitionen und Animationen flüssig bewegen lassen. Die Kehrseite: Ein transformiertes Element nimmt weiter seinen alten Platz ein, überlappt Nachbarn und erzeugt einen eigenen Stapelkontext, was z-index-Verhältnisse ändern kann.

Häufige Fragen