3D und CSS

Paul Kinlan

Einführung

Lange Zeit war 3D nur für Desktopanwendungen verfügbar. Mit der Einführung fortschrittlicher Smartphones mit nativer GPU-Beschleunigung wird 3D inzwischen fast überall eingesetzt.

In der Regel wird 3D hauptsächlich als Gerät für Spiele oder einige erweiterte Benutzeroberflächen verwendet. Erst mit der Einführung von Perspective-Transformationen in WPF und Silverlight wurde ein geeignetes Modell für die Anwendung von 3D-Effekten auf Elemente der Benutzeroberfläche zu einer praktischen Lösung für Anwendungsentwickler, denn 3D ist nicht gerade einfach.

Das CSS-3D-Transformationsmodell wurde im März 2009 als Entwurfsspezifikation eingeführt, damit Webentwickler interessante und ansprechende Benutzeroberflächen erstellen können, die 3D-Effekte nutzen. Anwendungsentwickler können damit 3D-Perspektivtransformationen auf jedes visuelle DOM-Element anwenden.

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

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

Das CSS-3D-Modul wurde entwickelt, um Entwicklern beim Erstellen ansprechender und visuell ansprechender Anwendungen zu helfen. Es ist nicht dafür gedacht, immersive 3D-Welten zu erstellen.

Browserunterstützung und Hardwarebeschleunigung

-webkit-perspective

-webkit-transform-3d

Wichtig ist, dass ein Browser zwar 3D „unterstützt“, aber aufgrund von Hardware- und Treibereinschrä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 sich Browseranbieter entschieden, die Browser nicht mit einer reinen Software-Rendering-Lösung zu verlangsamen, sondern stattdessen die GPU zu nutzen, die möglicherweise nicht auf allen Plattformen verfügbar ist.

Funktionserkennung

Was ist mit der Funktionserkennung? Ich hatte gehofft, dass Sie das nicht fragen würden. Entwickler haben Tools wie Modernizr verwendet, um die Unterstützung bestimmter Browserfunktionen und -fähigkeiten zu erkennen. Es ist zwar möglich, die Unterstützung für 3D-Transformationen zu erkennen, aber nicht die Hardwarebeschleunigung. Letztere ist jedoch der Schlüsselfaktor.

Einfaches Beispiel

Am besten springen Sie gleich hinein. In diesem Beispiel wenden wir einen grundlegenden Satz 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 festlegt, wie die Tiefe der 3D-Szene gerendert wird. Werte von 1–1.000 haben einen sehr ausgeprägten Effekt, Werte über 1.000 weniger. Wir fügen dann 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 war es schon. Das Element ist jetzt vollständig interaktiv und in jeder Hinsicht ein vollwertiges DOM-Element (außer dass es jetzt noch cooler aussieht). Wenn Ihr Browser keine 3D-Transformationen unterstützt, passiert nichts. Es wird nur ein einfacher Iframe ohne Drehung angezeigt. Wenn Ihr Browser 3D-Transformationen unterstützt, aber keine Hardwarebeschleunigung verwendet, kann das Bild etwas seltsam aussehen.

Animation

Das Tolle an den 3D-Transformationen von CSS3 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-Objekte.

Elemente mit einer 3D-Perspektive zu animieren, ist ganz einfach. Legen Sie einfach den Stil „Übergang“ auf „Transformieren“ fest und fügen Sie eine Dauer und eine Animationsfunktion hinzu. Ab diesem Zeitpunkt werden alle Änderungen am Stil „transform“ animiert.

Wir haben die vorherigen Beispiele so umgestellt, dass statt Inline-Styles Dokumentstile verwendet werden. Dadurch wird das Beispiel nicht nur klarer, sondern es kann auch der Pseudo-Selektor :hover verwendet werden. Mit der :hover-Auswahl können Übergänge gestartet werden, indem Sie einfach den Mauszeiger auf das Element bewegen. Super!

Zusammenfassung

Dies 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 noch viele weitere Möglichkeiten, die in dieser Anleitung nicht behandelt wurden.