CSS-3D-Transform-Generator
3D-Effekte mit perspective, rotateX, rotateY und translateZ einstellen, Karte live drehen und CSS oder Tailwind kopieren.
Der CSS-3D-Transform-Generator dreht Elemente im Raum. Du stellst Perspektive und Blickpunkt ein, drehst um die X-, Y- und Z-Achse, schiebst mit translateZ nach vorn oder hinten und skalierst. Die Karte in der Vorschau zeigt Vorder- und Rückseite; fertig sind CSS, HTML-Gerüst und Tailwind-v4-Klassen.
.scene {
perspective: 800px;
}
.card {
transform: rotateX(20deg) rotateY(-25deg);
transform-style: preserve-3d;
}3D-Transformationen in CSS
Für 3D-Effekte braucht es zwei Ebenen: einen Container mit perspective als
„Kamera“ und das Element, das per rotateX(), rotateY() und translateZ() im Raum bewegt wird.
| Funktion | Achse | Wirkung |
|---|---|---|
rotateX() | waagerecht | Kippt nach vorn oder hinten |
rotateY() | senkrecht | Dreht nach links oder rechts |
rotateZ() | zum Betrachter | Dreht wie rotate() |
translateZ() | zum Betrachter | Rückt näher oder weiter weg |
Flache Drehungen, Verschiebungen und Neigungen erstellst du im CSS-Transform-Generator.
Häufige Fragen
Was bewirkt perspective?
perspective legt fest, wie weit der Betrachter von der Ebene entfernt ist. Kleine Werte wie 300 px wirken extrem verzerrt, große wie 1500 px flach. Gesetzt wird sie am Elternelement, damit alle Kinder dieselbe Fluchtperspektive teilen.
perspective als Eigenschaft oder als Funktion?
Die Eigenschaft perspective am Elternelement gilt für alle Kinder gemeinsam. Die Funktion transform: perspective(800px) rotateY(…) gilt nur für das Element selbst und eignet sich für einzelne Elemente.
Wozu dient backface-visibility: hidden?
Sie blendet die Rückseite aus, sobald ein Element um mehr als 90 Grad gedreht ist. Das braucht man für Wendekarten: Vorder- und Rückseite liegen übereinander, sichtbar ist jeweils nur die zugewandte Seite.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.