6XC

CSS Transform-Generator

Kombinieren Sie rotate, scale, translate und skew visuell und kopieren Sie das resultierende transform-CSS.

966 Aufrufe

Die Eigenschaft transform

transform verschiebt, dreht, skaliert und schert ein Element, ohne den Dokumentfluss zu beeinflussen, und ist GPU-beschleunigt — deshalb sind transform (zusammen mit opacity) die bevorzugten Eigenschaften für flüssige Animationen. Funktionen werden von rechts nach links angewendet, daher ist ihre Reihenfolge wichtig: rotate(45deg) translateX(50px) ist nicht dasselbe wie umgekehrt.

Häufig gestellte Fragen

Warum ist die Reihenfolge der Funktionen wichtig?

Jede Funktion transformiert das Koordinatensystem für die nächste. Erst translate, dann rotate: bewegt zuerst und dreht sich dann an Ort und Stelle. Erst rotate, dann translate: dreht zuerst die Achse, sodass die Bewegung diagonal verläuft.

Beeinflusst transform umliegende Elemente?

Nein — das Element behält seinen ursprünglichen Platz im Layout. Das macht Transformationen günstig zu animieren, erfordert aber, dass Sie auf Überlappungen achten.

Ähnliche Tools

CSS-Farbverlauf-Generator Gestalten Sie lineare, radiale und konische CSS-Farbverläufe mit Live-Vorschau und kopieren Sie den Code. Erstellen CSS-Box-Shadow-Generator Gestalten Sie einen box-shadow visuell — Versatz, Unschärfe, Ausdehnung, Farbe, Deckkraft und Inset — mit Live-Vorschau. Erstellen CSS Border-Radius-Generator Runden Sie jede Ecke einzeln oder alle zusammen, in px oder %, mit Live-Vorschau und kopierbarem CSS. Erstellen CSS Text-Schatten-Generator Gestalten Sie einen text-shadow mit Versatz, Unschärfe, Farbe und Deckkraft — Live-Vorschau an Beispieltext. Erstellen