3D und CSS

Paul Kinlan

Einführung

Lange Zeit war 3D nur Desktopanwendungen vorbehalten. Mit der Einführung von Smartphones, die auf native GPU-Beschleunigung zugreifen können, wird 3D inzwischen fast überall eingesetzt.

3D wird in der Regel hauptsächlich für Spiele oder einige erweiterte Benutzeroberflächen verwendet. Erst mit der Einführung von Perspektiventransformationen in WPF und Silverlight wurde ein geeignetes Modell zum Anwenden von 3D-Effekten auf Benutzeroberflächenelemente zu einer praktischen Lösung für Anwendungsentwickler (3D ist schließlich nicht gerade einfach).

Das CSS 3D Transform Model wurde im März 2009 als Spezifikationsentwurf eingeführt, damit Webentwickler interessante und ansprechende Benutzeroberflächen erstellen können, die 3D nutzen. Anwendungsautoren können damit 3D-Perspektivtransformationen auf beliebige visuelle DOM-Elemente anwenden.

Der Arbeitsentwurf für CSS-3D-Transformationen ist eine logische Erweiterung des CSS-2D-Transformationsmodells und führt einige zusätzliche Eigenschaften ein, darunter Perspektiven, Drehungen und Transformationen in einem 3D-Raum.

Noch nie war es so einfach, 3D-Benutzeroberflächen zu erstellen. Diese Technologien haben die Einstiegshürden gesenkt. Sie müssen kein Mathe-Genie mehr sein, um 3D-Elemente zu erstellen.

Das CSS 3D-Modul soll Entwicklern helfen, ansprechende und visuell interessante Anwendungen zu erstellen. Es ist jedoch nicht dafür gedacht, immersive 3D-Welten zu entwickeln.

Browserunterstützung und Hardwarebeschleunigung

-webkit-perspective

-webkit-transform-3d

Wichtig ist, dass ein Browser zwar 3D unterstützen kann, aber aufgrund von Hardware- und Treiberbeschränkungen möglicherweise nicht in der Lage ist, 3D zu rendern. 3D-Szenen, die auf dem DOM basieren, können sehr rechenintensiv sein. Daher haben Browseranbieter beschlossen, dass sie nicht auf eine reine Software-Rendering-Lösung setzen, die die Browser verlangsamen würde, sondern stattdessen die GPU nutzen, die möglicherweise nicht auf allen Plattformen verfügbar ist.

Funktionserkennung

Was ist mit der Funktionserkennung? Ich hatte gehofft, dass du nicht fragen würdest! Entwickler verwenden Tools wie Modernizr, um die Unterstützung für bestimmte Browserfunktionen zu erkennen. Es ist zwar möglich, das Vorhandensein von Unterstützung für 3D-Transformationen zu erkennen, aber nicht das Vorhandensein von Hardwarebeschleunigung, die die wichtigste Voraussetzung ist.

Einfaches Beispiel

Am besten ist es, einfach loszulegen. In diesem Beispiel wenden wir eine einfache Reihe von Rotationen auf ein beliebiges DOM-Element an.

Zuerst 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. Wir fügen dann ein 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 Element ist jetzt vollständig interaktiv und in jeder Hinsicht ein vollwertiges DOM-Element (nur dass es jetzt noch cooler aussieht). Wenn Ihr Browser keine 3D-Transformationen unterstützt, passiert nichts. Es wird nur ein einfaches iFrame ohne Rotation angezeigt. Wenn Ihr Browser 3D-Transformationen ohne Hardwarebeschleunigung unterstützt, sieht es möglicherweise etwas ungewöhnlich aus.

Animieren

Was mir an CSS3-3D-Transformationen besonders gefällt, ist, dass sie sich so gut mit dem CSS-Übergangsmodul kombinieren lassen. Animationen und Übergänge lassen sich in CSS ganz einfach definieren. Das gilt auch für 3D.

Es ist ganz einfach, Elemente mit einer 3D-Perspektive zu animieren. Legen Sie einfach den Stil „transition“ auf „transform“ fest und fügen Sie eine Dauer und eine Animationsfunktion hinzu. Ab diesem Zeitpunkt wird jede Änderung des „transform“-Stils animiert.

Wir haben die vorherigen Beispiele so umgestaltet, dass Dokumentstile anstelle von Inline-Stilen verwendet werden. Dadurch wird das Beispiel nicht nur übersichtlicher, sondern es kann auch der Pseudoselektor :hover verwendet werden. Mit der Auswahl :hover können Übergänge initiiert werden, indem Sie einfach die Maus über das Element bewegen. Sehr gut!

Zusammenfassung

Das war nur ein kurzer Überblick über einige der coolen Effekte, die mit CSS-3D-Transformationen auf jedes sichtbare DOM-Element angewendet werden können. Es gibt noch viele Dinge, die in dieser Anleitung nicht behandelt wurden.