📝 Liste der CSS3 3D Transform Eigenschaften
- RotateX
- RotateY
- RotateZ
- TranslateZ
- Perspective
RotateX: Drehung um die X-Achse
Was ist RotateX?
Die rotateX Funktion ermöglicht es, ein Element um die X-Achse zu drehen. Dies erzeugt einen 3D-Effekt, der besonders für Animationen und interaktive Elemente nützlich ist.
📝 Beispiel für RotateX
Im obigen Beispiel wurde die CSS-Anweisung transform: rotateX(45deg); verwendet, um das Bild um 45 Grad um die X-Achse zu drehen.
RotateY: Drehung um die Y-Achse
Was ist RotateY?
Die rotateY Funktion wird verwendet, um ein Element um die Y-Achse zu drehen. Dies erzeugt einen 3D-Effekt, der die Tiefe des Elements betont.
📝 Beispiel für RotateY
Im obigen Beispiel wurde die CSS-Anweisung transform: rotateY(45deg); verwendet, um das Bild um 45 Grad um die Y-Achse zu drehen.
RotateZ und TranslateZ: Drehung um die Z-Achse und Verschiebung in der Z-Ebene
Was sind RotateZ und TranslateZ?
Die rotateZ und translateZ Funktionen ermöglichen Drehungen um die Z-Achse und Verschiebungen entlang der Z-Ebene. Diese können einzeln oder in Kombination verwendet werden, um komplexe 3D-Effekte zu erzielen.
📝 Beispiel für RotateZ und TranslateZ
Im obigen Beispiel wurde die CSS-Anweisung transform: rotateZ(30deg) translateZ(20px); verwendet, um das Bild sowohl um die Z-Achse zu drehen als auch in der Z-Ebene zu verschieben.
Perspective: Perspektive in 3D-Transformationen
Was ist Perspective?
Die perspective Eigenschaft wird verwendet, um die Perspektive für alle 3D-Transformierten Kinder eines Elements zu definieren. Dies ist entscheidend für die Erzeugung realistischer 3D-Effekte.
📝 Beispiel für Perspective
Im obigen Beispiel wurde die CSS-Anweisung perspective: 500px; auf den Container angewendet, um eine Perspektive von 500 Pixeln zu setzen. Das darin enthaltene Bild wurde dann um die Y-Achse gedreht.
🔍 Fazit
CSS3 3D Transforms bieten eine breite Palette von Möglichkeiten, um realistische 3D-Effekte in Webdesign und -entwicklung zu erzielen. Von einfachen Drehungen bis hin zu komplexen Kombinationen von Transformationen und Perspektiven, die Möglichkeiten sind nahezu endlos.
