3D-Transformationen
Was sind 3D-Transformationen?
Mit CSS-Transformationen können Elemente in ihrer Form verändert, d. h. transformiert werden. Mit 3D-Transformationen können Elemente um ihre X-, Y- und Z-Achse dreidimensional rotiert werden.
Mit der CSS-Eigenschaft „transform“ können die verschiedenen Methoden zur Transformation von Elementen definiert werden:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/id6de1290904627ac/version/1491650764/image.png)
CSS-Methode „rotateX()“
Mit der CSS-Methode „rotateX()“ können Elemente entlang ihrer X-Achse dreidimensional rotiert werden. Dabei wird in der Klammer ein Werte in der Einheit Grad („deg“) angegeben:
CSS-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i3dc6f610f0e91abc/version/1491653752/image.png)
HTML-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ie2c103dde371110d/version/1491653768/image.png)
Ergebnis im Browser:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ic6b8ee6370aa1893/version/1491653800/image.png)
CSS-Methode „rotateY()“
Mit der CSS-Methode „rotateY()“ können Elemente entlang ihrer Y-Achse dreidimensional rotiert werden. Dabei wird in der Klammer ein Werte in der Einheit Grad („deg“) angegeben:
CSS-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i674f4f62437c531e/version/1491654031/image.png)
HTML-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i7ff6c4653b09e37c/version/1491654070/image.png)
Ergebnis im Browser:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i7f9843224b6ed932/version/1491654097/image.png)
CSS-Methode „rotateZ()“
Mit der CSS-Methode „rotateZ()“ können Elemente entlang ihrer Z-Achse rotiert werden. Dabei wird in der Klammer ein Werte in der Einheit Grad („deg“) angegeben:
CSS-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ic52913d046c31d37/version/1491747811/image.png)
HTML-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/icc667c2edf7a512c/version/1491747822/image.png)
Ergebnis im Browser:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i532222dc94f03d78/version/1491747836/image.png)
CSS-Methode „rotate3d()“
Die CSS-Methode „rotate3d()“ ist eine Kombination der drei Methoden „rotateX()“, „rotateY()“ und „rotateZ()“. Hier werden in der Klammer drei Zahlen zwischen 0 und 1, die den Anteil am Winkel für die Rotation in X-, Y- und Z-Richtung definieren und ein Winkel in Grad („deg“) angegeben:
CSS-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ia14cf4917a7d3bda/version/1491747931/image.png)
HTML-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i2d388c0318822700/version/1491747949/image.png)
Ergebnis im Browser:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/icb2016f16c3b9f6b/version/1491747959/image.png)
Abschlussübung
Als Abschlussübung kannst du die Abschlussübung aus dem Kapitel „2D-Transformationen“ kopieren und statt der 2D-Transformation „scale()“ die 3D-Transformation „rotateX()“ verwenden:
Gehe dabei wie folgt vor:
- Kopiere die CSS- und HTML-Datei der Abschlussübung aus dem Kapitel „2D-Transformationen“
- Tausche in der CSS-Datei die CSS-Methode „scale()“ an beiden Stellen durch die CSS-Methode „rotateX()“ aus
- Verweise in der HTML-Datei im „link“-Element auf die neue CSS-Datei
- Verweise im ersten Link des Menüs („HOME“) auf die neue HTML-Datei
Die Lösung kannst du dir zur Kontrolle hier herunterladen:
Quellen
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/%C3%A4u%C3%9Fere_Gestaltung/Transformationen/rotate