Wie animiere ich
komplexe Elemente in 3D?

3D Würfel

Die Klasse code-cube hat 6 Kinder. Jedes der Kinder ist im 3D Raum mit ein paar Werten für TRANSFORM so verschoben, dass ein Würfel entsteht. Die Klasse code-cube bekommt die Animation "spinning-code-cube". Die Animation ist eine 3D Rotation. Die Kinder folgen der Animation. Das ist wie der Drehtisch im chinesischen Restaurant. Man dreht die Platte und die Speisen drehen sich mit.

CSS3 Animation

CSSWerteBedeutung
animation-name:Spinning-ArnoldName
animation-duration:24s; 0; 8s;Dauer
animation-timing-function:ease; linear, ease-in; ease-out; ease-in-out; cubic-bezier(n,n,n,n);Beschleunigung der Animation
animation-delay24s; 0; 8s;Verzögerung des Starts
animation-iteration-count:1; 5; infiniteDurchgänge der Animation
animation-direction:normal; reverse; alternate; alternate-reverseAbspielrichtung, z.B. vorwärts und dann rückwärts etc.
@keyframes0% {css: value; ... } 100% {css: value; ...};
from {css: value; ... } to {css: value; ... };
Beliebig viele Keyframes der Animation
animation:Spinning-Arnold 5s infinite;Kurzschreibweise für die Animations Eigenschaften. (name, duration, timing, delay, iteration, direction)
animation-play-state:running; paused;Abspielen oder Pause

transform:

CSSBedeutung
transform:TRANSFORM kann über diverse Werte das Element manipulieren. Rotieren, Skalieren, Kippen und eine ganze Reihe mehr Veränderungen sind möglich. Es können mehrere Werte mit Leerzeichen aneinandergereiht werden. Die neuen Browser unterstützen TRANSFORM in einfacher Schreibweise. Ältere Versionen der Browser benötigen die Vendor-Prefixe (-moz-, -ms-, -webkit, -o-). TRANSFORM ist bei Animationen besonders gut und damit schnell zu berechnen und daher ausdrücklich empfohlen. TRANSFORM legt die Elemente im Browser auf einen anderen Render-Layer. Dies kann bei dünner Schrift zu Unschärfen führen, da ein Pixel nicht ganz getroffen wurde. In so einem Fall sollte TRANSFORM bereits von Anfang an mit einem Wert zugewiesen werden. Z.B. TRANSFORM: translateZ(0) wird dafür gerne genommen.
perspective:Bestimmt Entfernung der Beobachter Perspektive für die KINDER des 3D Elements. Der Wert NONE zeigt die 3D-Kinder ohne Verzerrung. Ein niedriger Wert lässt die Kinder nah erscheinen.
perspective-origin:Quelle der 3D Kinder. Ein Wert von 50% 50% lässt sie genau in der Mitte entstehen.
backface-visibility:Regelt die Sichtbarkeit der Rückseite einer gedrehten Ebene.

Werte für transform:

WertBedeutung
translateVerschieben auf der X und Y Achse
translate3dVerschieben auf der X, Y und Z Achse
translateXVerschiebt nur auf der X-Achse
translateYVerschiebt nur auf der Y-Achse
translateZVerschiebt nur auf der Z-Achse
scaleSkaliert Breite und Höhe
scale3dSkaliert Breite und Höhe sowie Z Achse
scaleXSkaliert nur die Breite
scaleYSkaliert nur die Höhe(YAchse)
scaleZSkaliert nur die Z-Achse(Z Achse)
rotateDrehen
rotate3d3D Rotation
rotateXDreht um die X-Achse
rotateYDreht um die Y-Achse
rotateZDreht um die Z-Achse
skewKippen der X- und Y-Achse
skewXKippen der X-Achse
skewYKippen der Y-Achse
matrixZusammenfassung der sechs 2-D Werte
matrix3dZusammenfassung der 16 3-D Werte

https://desandro.github.io/3dtransforms/docs/cube.html

► Weitere Infos

Externe Quellen

Kompatibilität

http://caniuse.com/#feat=transforms3d

Die Unterstützung für 3D transoform ist bei den heute gängigen Browser ziemlich gut und perspektivisch sehr gut. Die Vendo-Prefixe sind jedoch unbedingt zu beachten.


CSS 3D Transforms Module Level 3

WD-css3-3d-transforms

Original Spezifikation der W3C für 3D Transform und seine ergänzenden Eigenschaften.


Transformationen auf selfhtml.wiki

http://wiki.selfhtml.org(...)Transformationen

Umfangreiche Erklärung für 2D und 3D transformation in deutscher Sprache.


CSS 3D Wolken Tutorial

http://www.clicktorelease.com(...)css3dclouds

Sehr cooles Tutorial in englischer Sprache um eine 3D Wolken mit CSS und Javascript zu erstellen.


Tridiv

http://www.tridiv.com/

Online Editor um 3D Objekte in HTML und CSS zu erstellen.