3D und CSS

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

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 perspektivischen 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. 3D ist schließlich 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-Genie 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ützen“ kann, 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.

Feature-Erkennung

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 eine Reihe einfacher Drehungen 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.

Es ist ganz einfach, Elemente zu animieren, auf die eine 3D-Perspektive angewendet wurde. Legen Sie dazu 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. Das Beispiel wird dadurch nicht nur verständlicher, sondern der Pseudo-Selektor :hover kann auch für das Beispiel 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 diesem Tutorial nicht behandelt wurden.