CSS-Transform-Generator
Elemente drehen, verschieben, skalieren und neigen: rotate, translate, scale und skew visuell einstellen – CSS und Tailwind kopieren.
Der CSS-Transform-Generator verschiebt, dreht, skaliert und neigt Elemente visuell. Du stellst translate, rotate, scale und skew mit Reglern ein und wählst den Bezugspunkt (transform-origin) im Raster. Die Vorschau zeigt Original und Ergebnis übereinander; ausgegeben werden transform, die modernen Einzel-Eigenschaften und Tailwind-Klassen.
Gestrichelt: Ausgangslage. Roter Punkt: Bezugspunkt (transform-origin).
Bezugspunkt
.element {
transform: rotate(15deg) scale(1.1);
}Die 2D-Transformationen
| Funktion | Wirkung | Beispiel |
|---|---|---|
translate() | Verschieben | translate(20px, -10px) |
rotate() | Drehen um den Bezugspunkt | rotate(45deg) |
scale() | Vergrößern oder verkleinern | scale(1.2) |
skew() | Neigen, wie kursiv | skew(10deg, 0deg) |
Räumliche Drehungen mit Perspektive erstellst du im CSS-3D-Transform-Generator, Bewegungen mit Keyframes im CSS-Animation-Generator.
Häufige Fragen
Warum ist die Reihenfolge in transform wichtig?
Die Funktionen werden von rechts nach links auf das Koordinatensystem angewendet. rotate(45deg) translate(100px) verschiebt entlang der gedrehten Achse, translate(100px) rotate(45deg) erst waagerecht und dreht dann. Der Generator nutzt die Reihenfolge translate, rotate, scale, skew.
Was sind die Einzel-Eigenschaften translate, rotate und scale?
Seit 2022 gibt es eigene CSS-Eigenschaften für Verschiebung, Drehung und Skalierung. Sie lassen sich einzeln ändern und animieren, ohne die anderen Werte zu wiederholen. Für skew gibt es keine Einzel-Eigenschaft, dafür bleibt transform.
Beeinflusst transform das Layout?
Nein. Das Element behält seinen ursprünglichen Platz, nur die Darstellung ändert sich. Nachbarelemente rücken nicht nach. Deshalb eignet sich transform gut für Animationen.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.