CSS-3D-Transform-Generator
3D-Karten und Würfel per Schieberegler gestalten und den CSS-Code direkt kopieren
Mit Schiebereglern für Rotation (X/Y/Z), Perspektive, Verschiebung und Größe gestalten Sie 3D-Karten- und Würfeleffekte und sehen das Ergebnis sofort in der Live-Vorschau. Webentwicklerinnen und Frontend-Entwickler müssen die passenden Werte für Hover-Effekte auf Karten oder räumliche Würfelanimationen so nicht mehr erraten, sondern justieren sie direkt am sichtbaren Ergebnis. Berechnung und Vorschau laufen vollständig im Browser – es werden keinerlei Daten an einen Server gesendet.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Wählen Sie zwischen dem Modus 3D-Karte und 3D-Würfel.
- Justieren Sie die Regler für Rotate X/Y/Z, Perspektive, Translate Z und Skalierung und beobachten Sie die Vorschau.
- Ist die gewünschte Form erreicht, übernehmen Sie den erzeugten CSS-Code unten über die Schaltfläche zum Kopieren.
- Sind die Werte durcheinandergeraten, stellen Sie mit der Schaltfläche zum Zurücksetzen die Standardwerte wieder her.
FAQ
- Warum ist der Wert für perspective so wichtig?
- Erst mit gesetzter perspective entsteht bei einer Drehung räumliche Tiefe (perspektivische Verzerrung). Je kleiner der Wert, desto stärker die Verzerrung; je größer, desto flacher wirkt das Element.
- Kann ich das erzeugte CSS unverändert übernehmen?
- Ja. Der kopierte Code enthält bereits die Eigenschaften transform, transform-style und transition – Sie müssen lediglich die Klassennamen anpassen, dann funktioniert er sofort.
- Worauf sollte ich achten, damit die 3D-Transform-Animation nicht ruckelt?
- Die transform-Eigenschaft wird GPU-beschleunigt und läuft in der Regel flüssig. Fehlt am Elternelement jedoch overflow: hidden oder die Einstellung backface-visibility, kann man die Rückseite der Karte durchscheinen sehen oder es kommt zu Rucklern. Wenn zu viele Elemente gleichzeitig 3D-Effekte erhalten, kann die Bildrate auf schwächeren Geräten außerdem einbrechen – setzen Sie den Effekt daher nur dort ein, wo er wirklich gebraucht wird.