Warum spielt die Reihenfolge der Transformationsfunktionen eine Rolle?

CSS wendet Transformationsfunktionen von links nach rechts an, so dass das Drehen dann das Übersetzen ein anderes Ergebnis liefert als das Übersetzen dann das Drehen. Der Generator gibt sie in einer konsistenten Reihenfolge aus; Passen Sie Ihr CSS an, wenn Sie eine bestimmte Sequenz benötigen.

Warum ist die Perspektive auf den Elternteil und nicht auf die Box?

Damit 3D-Rotationen korrekt aussehen, wird die Perspektive normalerweise auf den Elternteil (das Element, das die transformierte Box enthält) eingestellt. Das Tool wendet es auf die Vorschauphase an und notiert dies im generierten CSS-Kommentar.

CSS Transformation Generator

Verfassen Sie CSS-Transformationen mit Schiebereglern - übersetzen, skalieren, rotieren, verzerren und vollständige 3D - und kopieren Sie die Transformationseigenschaft.

2D transforms

Translate X

Translate Y

Scale X

Scale Y

Rotate

deg

Skew X

deg

Skew Y

deg

Transform origin

3D transforms

Perspective

Rotate X

deg

Rotate Y

deg

Rotate Z

deg

Translate Z

Preview

BOX

CSS

Was this tool helpful?

Send output to:

How to use CSS Transform Generator

Passen Sie die 2D-Slider zum Übersetzen, Skalieren, Drehen und Verzerren an.
Wählen Sie einen transform-origin, um den Pivot-Punkt zu ändern.
Öffnen Sie den 3D-Abschnitt, um rotationX/Y/Z, translateZ und eine übergeordnete Perspektive einzustellen.
Klicken Sie auf CSS kopieren, um die Transformationserklärung zu erhalten.

Was ist CSS-Transform-Generator?

Der CSS Transform Generator erstellt die transform-Eigenschaft visuell. Verwenden Sie die 2D-Slider für translateX/Y, scaleX/Y, rotation und skewX/Y, legen Sie den transform-origin fest und fallen Sie dann in den 3D-Abschnitt für rotationX, rotationY, rotationZ, translateZ und einen übergeordneten perspektiv.

Ein gerastertes Vorschaufeld mit einem beschrifteten Element zeigt das Ergebnis in Echtzeit an, sodass Sie genau sehen können, wie jede Funktion stapelt. Die Reihenfolge der Funktionen ist in CSS wichtig, und die generierte Deklaration behält eine vernünftige, vorhersehbare Reihenfolge für Sie.

Alles läuft in Ihrem Browser. Kopieren Sie die resultierende Zeile transform zusammen mit allen transform-origin und perspektiv Regeln und fügen Sie sie in Ihr Stylesheet ein.

FAQ

Warum spielt die Reihenfolge der Transformationsfunktionen eine Rolle?: CSS wendet Transformationsfunktionen von links nach rechts an, so dass das Drehen dann das Übersetzen ein anderes Ergebnis liefert als das Übersetzen dann das Drehen. Der Generator gibt sie in einer konsistenten Reihenfolge aus; Passen Sie Ihr CSS an, wenn Sie eine bestimmte Sequenz benötigen.
Warum ist die Perspektive auf den Elternteil und nicht auf die Box?: Damit 3D-Rotationen korrekt aussehen, wird die Perspektive normalerweise auf den Elternteil (das Element, das die transformierte Box enthält) eingestellt. Das Tool wendet es auf die Vorschauphase an und notiert dies im generierten CSS-Kommentar.

Related tools

Author

Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 CSS Transform Generator on Wikipedia·Developer Tools on Wikipedia·CSS Transform Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated: 2026-06-03

CSS Transformation Generator

Something went wrong

How to use CSS Transform Generator

Was ist CSS-Transform-Generator?

FAQ

Related tools

Author

People also use

Ad blocker detected

Keyboard shortcuts