Zieh Regler für rotate, scale, translate und skew und kopiere das CSS und die Tailwind-Klassen. Behandelt die Reihenfolge von Transforms, transform-origin, 3D-Kartenflips und flüssige Animation.
Verschiebe, drehe, skaliere oder neige ein Element mit der Eigenschaft transform: transform: translate(20px, 0) rotate(15deg) scale(1.1) skewX(5deg). Die Funktionen wirken von rechts nach links, daher verändert ihre Reihenfolge das Ergebnis. Transforms verschieben nie das umgebende Layout, und ihre Animation ist günstig, weil der Browser die Arbeit an den Compositor übergeben kann.
Die vier 2D-Transform-Funktionen
Funktion
Beispiel
Tailwind
translate()
translate(1rem, -50%)
translate-x-4 -translate-y-1/2
rotate()
rotate(45deg)
scale()
scale(1.1)
skew()
skewX(6deg)
Bau mit den Reglern ein Transform zusammen und sieh zu, wie eine Karte reagiert, dann wechsle zwischen der einzelnen Eigenschaft transform und den separaten Eigenschaften translate, rotate und scale. Weiter unten findest du die Origin-Demo, einen 3D-Flip zum Hovern, Rezepte für Transitions und eine Erklärung, warum Transforms flüssig bleiben, während top und left ruckeln.
Zieh die Regler für translate, rotate, scale und skew. Die Karte bewegt sich, und das CSS schreibt sich selbst neu.
Wähle einen transform-origin, um zu sehen, welcher Punkt fixiert bleibt, während die Karte sich dreht oder wächst.
Wechsle zwischen der kombinierten Kurzschreibweise transform und den einzelnen Eigenschaften.
Kopiere das CSS oder die Tailwind-Klassen und füge sie in dein Stylesheet oder Markup ein.
Zentriere eine absolut positionierte Box mit top: 50%; left: 50%; translate: -50% -50%. Prozentwerte in translate beziehen sich auf das Element selbst, nicht auf sein Elternelement.
Animiere transform und opacity statt width, height, top oder left. Diese anderen Eigenschaften erzwingen in jedem Frame Layout-Arbeit.
Drehungen über 360deg sind erlaubt und für Animationen wichtig: rotate(720deg) dreht sich bei einer Transition ab 0 zweimal.
Setze will-change: transform nur bei Elementen, die gleich animiert werden, und entferne es danach wieder. Überall belassen kostet Speicher.
Häufige Fragen
Warum ist die Reihenfolge der Transform-Funktionen wichtig?
Jede Funktion verändert das Koordinatensystem für die Funktionen, die davor stehen, daher wird die Liste effektiv von rechts nach links angewendet. translate(100px) rotate(45deg) dreht die Box und schiebt sie dann gerade nach rechts, während rotate(45deg) translate(100px) sie entlang der gedrehten, diagonalen Achse verschiebt.
Was ist der Unterschied zwischen transform: rotate() und der Eigenschaft rotate?
Die Eigenschaften rotate, scale und translate sind eigenständige Versionen derselben Funktionen. Sie lassen sich getrennt setzen und animieren, sodass ein scale beim Hover keine anderswo gesetzte Drehung löscht. Der Browser wendet zuerst translate an, dann rotate, dann scale und danach alles in transform.
Beeinflusst transform das Layout oder andere Elemente?
Nein. Das Element behält seine ursprüngliche Box im Layout, und Nachbarn bewegen sich nicht. Nur sein gezeichnetes Bild ändert sich. Ein transformiertes Element erzeugt allerdings einen neuen Stacking Context und wird zum Containing Block für Nachfahren mit fester Position, was dich bei Modals überraschen kann.
Wie spiegle ich ein Element horizontal?
Verwende transform: scaleX(-1) oder die Eigenschaft scale mit scale: -1 1. Das spiegelt das Element um seinen Ursprung, standardmäßig die Mitte. Für einen 3D-Flip mit sichtbarer Rückseite dreh es um die Y-Achse innerhalb eines Elternelements mit perspective.
Warum ist mein transformierter Text unscharf?
Verschiebungen um Bruchteile und manche scale-Werte platzieren Glyphen zwischen Pixeln, was sie weicher macht, besonders während einer laufenden Animation. Translate-Werte auf ganze Pixel zu runden und auf die Endgröße zu skalieren statt von einer kleineren aus hoch, macht das Ergebnis meist schärfer.
Eine Transform-Liste lesen
Ein hilfreiches Denkmodell: Beginne bei der letzten Funktion und arbeite dich zur ersten zurück, wobei du das Element jedes Mal in seinem aktuellen, bereits veränderten Bezugssystem verschiebst, drehst oder streckst. Wenn ein Ergebnis falsch aussieht, hilft es oft, die Liste umzudrehen.
Prozentwerte in translate() messen die eigene Border Box des Elements. Deshalb zentriert translate(-50%, -50%) eine Box, deren Größe du vorher nicht kennst.
Warum Transforms flüssig animieren
Browser rendern eine Seite in Stufen: Style, Layout, Paint und Composite. Eine Änderung von top oder width startet das Layout für das Element und oft für seine Nachbarn neu. Eine Änderung von transform oder opacity kann meist direkt zum Compositing springen, wo eine bereits gezeichnete Ebene auf dem Grafikprozessor bewegt wird.
Das ist der Grund, warum Richtlinien für Bewegung immer wieder auf diese beiden Eigenschaften verweisen. Wenn eine Animation Frames verliert, öffne das Performance-Panel des Browsers und such in jedem Frame nach Layout- und Paint-Arbeit.
3D in einem Absatz
Gib dem Elternelement eine perspective, zum Beispiel 800px, damit um X oder Y gedrehte Kinder in die Tiefe zu weichen scheinen. Kleinere Zahlen übertreiben die Tiefe. transform-style: preserve-3d lässt verschachtelte Kinder diesen 3D-Raum teilen, und backface-visibility: hidden blendet eine Seite aus, sobald sie sich abwendet, was der Kern jedes Kartenflips ist.
Alle Transform-Funktionen
2D- und 3D-Transform-Funktionen mit ihren Tailwind-Utilities
Funktion
Was sie bewirkt
Tailwind (v3 und v4, sofern nicht anders angegeben)
translate(x, y)
Verschiebt entlang X und Y
translate-x-4, -translate-y-2, translate-x-[13px]
translateX() / translateY()
Verschiebt auf einer Achse
translate-x-1/2, translate-y-full
translateZ(z)
Bewegt zum Betrachter hin oder von ihm weg (braucht perspective)
translate-z-4 (v4)
rotate(a)
Dreht im Uhrzeigersinn um einen Winkel (deg, turn, rad)
rotate-45, -rotate-12, rotate-[17deg]
rotateX(a) / rotateY(a)
Kippt in 3D um die horizontale oder vertikale Achse
rotate-x-45, rotate-y-180 (v4)
scale(s) / scale(x, y)
Vergrößert oder verkleinert; negativ spiegelt
scale-110, scale-x-75, -scale-x-100
skew(x, y) / skewX() / skewY()
Neigt das Element
skew-x-6, -skew-y-3
matrix(a, b, c, d, e, f)
Alle 2D-Transforms in einer Matrix
beliebig: [transform:matrix(...)]
perspective(d)
Tiefe nur für dieses Element
perspective-[800px] am Elternelement (v4)
Reihenfolge der Operationen
Dieselben zwei Funktionen in anderer Reihenfolge setzen die Box an eine andere Stelle. Beide blauen Boxen starten an derselben Position.
Erst translate, dann rotate, im Vergleich zu erst rotate, dann translate
In der ersten Box erfolgt die Verschiebung entlang der X-Achse des Bildschirms. In der zweiten folgt sie der gedrehten Achse, daher landet die Box weiter unten.
Einzelne Eigenschaften überschreiben sich nicht gegenseitig
Die Hover-Regel ändert nur scale, daher bleibt das in der Grundregel gesetzte rotate erhalten. Mit der Kurzschreibweise transform müsstest du rotate(-3deg) in :hover wiederholen.
Gleiche Drehung, drei Ursprünge
Der Ursprung ist der Punkt, der fest bleibt. center ist der Standard; top left schwenkt die Box wie eine Tür mit dem Scharnier in der Ecke.
3D-Kartenflip
Zum Umdrehen hovern oder fokussieren (nur CSS)
perspective am Wrapper sorgt für Tiefe, preserve-3d hält beide Seiten in einem 3D-Raum, und backface-visibility blendet die jeweils abgewandte Seite aus. Nutzer mit reduzierter Bewegung bekommen einen sofortigen Wechsel.
Transforms mit Transitions kombinieren
Anheben beim Hover für Karten und Buttons
Nur transform und box-shadow ändern sich, und die Bewegung ist für Leser abgeschaltet, die weniger Bewegung wünschen.
Dieselbe Idee in Tailwind
motion-safe: wendet die Hover-Bewegung nur an, wenn der Leser keine reduzierte Bewegung angefordert hat.
Was sich günstig animieren lässt
Render-Arbeit, die eine Änderung der Eigenschaft auslöst (typisches Browserverhalten)
Eigenschaft
Layout
Paint
Nur Composite
transform, translate, rotate, scale
Nein
Nein (meistens)
Ja
Nein
Nein (meistens)
Ja
background-color, color, box-shadow
Nein
Ja
Nein
width, height, top, left, margin
Ja
Ja
Nein
(kein Transform)
Transform-Playground
Ausgabestil
Kurzschreibweise transform
einzelne Eigenschaften
Zurücksetzen
Karte
Gestrichelter Umriss: wo die Karte im Layout sitzt. Dunkler Punkt: der transform-origin.