Animationen mit CSS3 – Teil 2: Die 3D-Transformationen

Bitte lesen Sie gegebenenfalls noch Teil 1 als Einstieg in das Thema Transformationen. Auch im dreidimensionalen Raum können Elemente transformiert werden. Damit das funktioniert muss man zunächst bestimmen, wie man auf das dreidimensionale Element draufschaut.

Mit perspective bestimmt man den Abstand. Je geringer der Wert, desto näher ist man optisch dran. Mit perspective-origin bestimmt man aus welchem Winkel (X- und Y-Achse) man drauf schaut, wobei 50% 50% genau mittig bedeutet. Diese oder ähnliche Werte gibt man dem übergeordnetem Container in dem sich das Bild befindet.

Ansonsten funktionieren alle zuvor beschriebenen 2D- Transformationen auch im dreidimensionalen Bereich nur das hier eine weitere Dimension dazukommt (Neben der X- und Y-Achse gibt es dann auch noch die Z-Achse). Ich möchte allerdings hier nur in die 3D-Rotation eingehen, da das meiner Meinung nach die interessanteste Möglichkeit der 3D-Transformationen ist.

Das Bild wird somit auf 3 Achsen gedreht:

3D-Transformationen: Rotation

3D-Rotation

Man kann ein Element sogar so stark rotieren, dass man seine Rückseite sieht.

Das Ergebnis ist dann ein genaues Spiegelbild der Vorderseite.

3D-Transformationen: Rotation Rückseite

3D-Rotation

Der Vollständigkeit halber hier noch mal alle Befehle mit Browser-Präfixen (unter caniuse.com können Sie sich informieren, ob entsprechende Präfixe noch benötigt werden):

Hier bei thewebrocks.com habe ich noch einen Tester/Codegenerator für 3D-Transformationen entdeckt.