Was ist CSS 3D Transform Generator?
Der CSS 3D Transform Generator ist ein visuelles Werkzeug zum Erstellen dreidimensionaler CSS-Transformationen. CSS-3D-Transformationen ermöglichen das Drehen, Verschieben und Skalieren von Elementen im 3D-Raum mit Funktionen wie rotateX(), rotateY(), translateZ() und perspective().
Kurze Antwort
Erstellen Sie visuell CSS-3D-Transformationen durch Anpassen von rotateX, rotateY, rotateZ, scale, translate3d, perspective und transform-origin. Kopieren Sie die vollständige CSS transform-Property.
Last updated: 2026-06-11
Einschränkungen
- Dieses Tool generiert eine Einzelelement-3D-Transformation.
- Die Vorschau verwendet ein statisches 2D-Kartenelement.
- 3D-Transformationen können auf Safari in Kombination mit border-radius zu Artefakten führen.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
So nutzt du dieses Tool
- Passen Sie die Schieberegler für rotateX, rotateY und rotateZ an, um die Vorschau-Karte im 3D-Raum zu neigen.
- Stellen Sie den Perspektivenwert ein – kleinere Werte (200-400px) erzeugen stärkere 3D-Effekte.
- Passen Sie translateX, translateY und translateZ an, um das Element zu positionieren.
- Skalieren Sie das Element bei Bedarf und legen Sie den transform-origin-Punkt fest.
- Schalten Sie Preserve 3D ein und kopieren Sie die CSS-Ausgabe in Ihr Stylesheet.
Wofür du es nutzen kannst
- Erstellen Sie einen Kartenneigungseffekt beim Hover mit rotateX und rotateY basierend auf der Mausposition.
- Erstellen Sie eine 3D-Flip-Animation für eine Preiskarte mit rotateY und einem CSS-Übergang.
- Entwerfen Sie einen Hero-Bereich mit einem perspektivisch verzerrten dekorativen Element.