Einleitung
Lange Zeit war 3D nur Desktopanwendungen vorbehalten. Seit der Einführung von fortschrittlichen Smartphones mit nativer GPU-Beschleunigung kommt 3D fast überall zum Einsatz.
Meist wird die 3D-Ansicht vor allem für Spiele oder einige moderne Benutzeroberflächen genutzt. Erst mit der Einführung der Perspective-Transformationen in WPF und Silverlight erwies sich ein geeignetes Modell für die Anwendung von 3D-Effekten auf Benutzeroberflächenelemente für Anwendungsentwickler (schließlich ist 3D nicht ganz einfach).
Das CSS 3D-Transformationsmodell wurde im März 2009 als Entwurfsspezifikation eingeführt, damit Webentwickler interessante und überzeugende Benutzeroberflächen erstellen können, die 3D nutzen. Sie ermöglichen es Anwendungsautoren, perspektivische 3D-Transformationen auf jedes visuelle DOM-Element anzuwenden.
Der Arbeitsentwurf zur CSS-3D-Transformation ist eine logische Erweiterung des CSS-2D-Transformationsmodells mit einigen zusätzlichen Eigenschaften, darunter Perspektiven, Rotationen und Transformationen in einem 3D-Raum.
Noch nie waren wir in der Lage, 3D-Oberflächen so einfach zu erstellen. Durch diese Technologien wurde die Einstiegsbarriere gesenkt. Du musst kein mathematischer Zauber mehr sein, um 3D-Elemente zu erstellen.
Das CSS-3D-Modul wurde entwickelt, um Entwickler bei der Erstellung komplexer und optisch interessanter Anwendungen zu unterstützen, und nicht für die Erstellung immersiver 3D-Welten.
Browserunterstützung und Hardwarebeschleunigung
-webkit-perspektive
-webkit-transform-3d
Wichtig: Auch wenn ein Browser 3D „unterstützt“, kann er möglicherweise aufgrund von Hardware- und Treibereinschränkungen kein 3D rendern. 3D-Szenen, die auf dem DOM basieren, können sehr rechenintensiv sein. Daher haben sich die Browseranbieter entschieden, die Browser nicht mit einer reinen Software-Rendering-Lösung zu verlangsamen. Stattdessen nutzen sie die GPU, die möglicherweise nicht auf allen Plattformen verfügbar ist.
Funktionserkennung
Wie sieht es mit der Funktionserkennung aus? Ich hatte gehofft, dass du nicht fragen wolltest! Entwickler verwenden Tools wie Modernizr, um herauszufinden, ob bestimmte Browserfunktionen unterstützt werden. Es ist zwar möglich, dass 3D-Transformationen unterstützt werden, aber nicht, ob eine Hardwarebeschleunigung vorhanden ist. Die Hardwarebeschleunigung ist ein wichtiger Bestandteil.
Basisbeispiel
Nichts ist besser, als direkt hineinzugehen. In diesem Beispiel wenden wir einen grundlegenden Satz von Rotationen auf ein beliebiges DOM-Element an.
Zunächst definieren wir eine Perspektive für das Stammelement.
<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">
Die Perspektive ist wichtig, da sie definiert, wie die Tiefe der 3D-Szene gerendert wird. Werte von 1 bis 1.000 erzeugen einen sehr ausgeprägten Effekt, Werte über 1.000 weniger. Anschließend fügen wir einen iFrame hinzu und wenden eine 30-Grad-Drehung um die Z- und Y-Achse an.
<iframe
src="http://www.html5rocks.com/"
style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>
BAM! Das bedeutet, das Element ist vollständig interaktiv und in jeder Hinsicht ein vollwertiges DOM-Element (außer dass es jetzt noch cooler aussieht). Wenn Ihr Browser 3D-Transformationen nicht unterstützt, passiert nichts. Es wird lediglich ein einfacher iFrame ohne Drehung angezeigt. Wenn Ihr Browser 3D-Transformationen unterstützt, aber ohne Hardwarebeschleunigung, kann dies etwas seltsam aussehen.
Animation
Was mir an CSS3-3D-Transformationen gefällt, ist die nahtlose Verknüpfung mit dem CSS-Übergangsmodul. Animationen und Übergänge lassen sich in CSS leicht definieren. Auch ihre Anwendung auf 3D-Bilder ist keine Ausnahme.
Das Animieren von Elementen mit einer 3D-Perspektive ist ganz einfach. Setzen Sie den „Übergangsstil“ einfach auf „transformieren“ und fügen Sie eine Dauer und eine Animationsfunktion hinzu. Ab dann werden alle Änderungen am tranform-Stil animiert.
Wir haben die vorherigen Beispiele so umformuliert, dass nun Dokumentstile anstelle von Inline-Stilen verwendet werden. Dadurch wird das Beispiel nicht nur bereinigt, sondern auch der Pseudoselektor :hover genutzt. Mit dem :hover-Selektor können Übergänge einfach durch Bewegen der Maus über das Element initiiert werden. Super!
Zusammenfassung
Das war nur ein kurzer Überblick über einige der coolen Effekte, die mithilfe von CSS-3D-Transformationen auf jedes sichtbare DOM-Element angewendet werden können. Es gibt immer noch viele Möglichkeiten, die in dieser Anleitung nicht behandelt wurden.