Wie Sie mit CSS animierte Werbebanner in 3D erstellen können.

Wenn Sie beim Surfen im Internet auf eine ziemlich komplexe 3D-Animation stoßen und ihre Neugier Sie dazu verleitet darauf zu klicken, um zu sehen, ob Sie in Flash realisiert wurde, lässt der Scharfsinn unseres Web-Entwicklers vermuten, dass es nicht anders sein könnte.

Tatsächlich gibt es nicht viele Alternativen: JavaScript, Canvas und ein paar andere Optionen. In diesem Beitrag möchten wir einige CSS-Eigenschaften vorstellen, die es uns ermöglichen, Animationen und Transformationen zu den Elementen einer Website zu verwalten (Animationen nur für WebKit).

CSS auch für 3D?

Ja, sogar für 3D. Aber lassen Sie uns die Dinge sofort in Angriff nehmen. Die Eigenschaften, die wir analysieren werden, sind nur für WebKit Browser Engine verfügbar. In diesem werden wir eine 3D-Animation mit CSS erstellen. Als Ergebnis werden wir ein Bannern erhalten, das sich dreidimensional um seine Achse dreht.

3D-Animationen können über die Eigenschaft -webkit-transform verwaltet werden, die auf verschiedene Weise erweitert werden kann:

translate3d(x,y,z), translateZ(z)

Die erste Funktion bewegt das Element gemäß der angegebenen Parameter auf einer dreidimensionalen Ebene, während die zweite Funktion nur für die Z-Achse gilt, wobei der Wert von Z im Gegensatz zu X und Y kein Prozentwert sein kann.

scale3d(x,y,z), scaleZ(z)

Ähnlich wie bei den beiden vorhergehenden Funktionen wird die Größe des Elements durch die Skalierungsfunktionen entsprechend der angegebenen Parameter verändert.

rotateX(angolo), rotateY(angolo), rotate3d(x,y,z,angolo)

Die ersten beiden Funktionen drehen das Element einfach um die horizontale und vertikale Achse. Der Winkel kann in Grad, Bogenmaß oder Gradienten angegeben werden. Die letzte Funktion erlaubt es, das Element dreidimensional zu drehen, indem sie durch X, Y und Z einen imaginären Vektor anzeigt, der die Rotationsachse und den entsprechenden Winkel darstellt. Die Funktion „rotate3D“ ist jene, die wir heute verwenden werden.

perspective(p)

Mit dieser Funktion können wir eine Perspektive festlegen aus der die Animation angezeigt werden soll.

Praxisbeispiel 3D-Animation mit CSS und WebKit

Im Folgenden werden wir ein dreidimensionales Banner erstellen, das sich um einen Vektor in der Mitte zwischen der X- und Y-Achse dreht.

Schauen wir uns nun das entsprechende Beispiel an (für Chrome und Safari):

HTML-Code ist sehr einfach. Im CSS sehen wir an der Spitze die Definition des Keyframes mit den Schritten, aus denen sich die Animation zusammensetzt. Die Funktion -webkit-transform wird durch rotation3d erweitert, das die Werte des Vektors erhält, um den die Animation (1,1,0) und der Winkel gesteuert werden soll.

Unter anderem legen wir Wert auf die Eigenschaft -webkit-animation: spin3s infinite ease-out, die wir verwenden, um die Nutzung der Animation festzulegen, die mit dem Keyframe-Spin definiert wurde.

Schlussgedanken.

Durch den Einsatz von CSS ist es heute möglich futuristische Werbebanner und atemberaubende 3D-Animationen zu erstellen, mit der Webseiten sehr auffällig gestaltet werden können. Wir werden sehen, wie die Webbrowser-Engines, die diese sehr interessanten CSS-Regeln unterstützen, aktualisiert werden.