3D-Elemente mit CSS erstellen

Bekannter und auch besser unterstützt als 3D- sind derzeit noch 2D-Transformationen. Sie sind laut neuem Arbeitsentwurf des W3C ein Subset der 3D-Transformationen. Sehen wir uns also zuerst 2D an, bevor wir zur Erweiterung - dem 3D-Raum - kommen.Die wichtigste Eigenschaft für Transformationen ist transform. Dahinter geben Sie an, wie ein Element gedreht (rotate), skaliert (scale), oder verschoben (translate) werden soll. Hier wird ein Element um 45 Grad nach rechts gedreht:

Wie Sie sehen, müssen Sie die Eigenschaften mit allen herstellerspezifischen Präfixen schreiben: Diese 2D-Transformationen funktionieren in allen modernen Browsern, im IE ab Version 9; aber alle Browser benötigen hierfür ihr Präfix.Um mehrere Transformationen zu kombinieren, schreiben Sie die Eigenschaften durch Leerzeichen getrennt hintereinander. Im nächsten Beispiel wird ein Element um sieben Grad gedreht und gleichzeitig leicht (auf 120 Prozent) vergrößert (scale). Zusätzlich sehen Sie im Beispiel die Eigenschaft transform-origin, über die der Drehpunkt festgelegt wird.

Neben rotate, scale und translate gibt es auch skew für Verzerrungen, das allerdings nicht mehr Teil der offiziellen Spezifikation ist.

3D-Transformationen funktioneren fast überall

3D-Transformationen erweitern diese Umwandlungen jetzt um die dritte Dimension: Neben der x- und der y-Achse gibt es die z-Achse, die sozusagen vom Bildschirm aus auf den Betrachter zugeht.3D-Transformationen funktionieren in Webkit-Browsern, im IE ab 10 und Firefox ab 10; auch der mobile Safari kann damit umgehen, der interne Android-Browser ab Version 3. Sehen wir uns die Möglichkeiten einmal anhand von Drehungen an. Die Werte für transform, die hier zur Verfügung stehen, sind passenderweise rotateX, rotateY und rotateZ, die jeweils eine Drehung um die angegebene Achse bewirken.In folgendem Beispiel stehen Bilder in div-Containern - warum das so wichtig ist, erklären wir gleich:

Per CSS werden die Bilder gedreht - genau wie bei den 2D-Transformationen müssen Sie die herstellerspezifischen Präfixe verwenden. Eingesetzt werden alle drei Drehungstypen.

Das Ergebnis sieht wahrscheinlich nicht ganz so aus, wie Sie es erwartet hätten, denn die Elemente bleiben flach: Das durch rotateX gedrehte Bild wirkt weniger hoch, ist also gestaucht - ebenso wirkt das um die y-Achse gedrehte Bild als zu schmal. Und das um die z-Achse gedrehte Bild sieht aus wie eine normale 2D-Drehung. Für den richtigen 3D-Effekt braucht es nämlich noch eine weitere Zutat: die Perspektive.

Intensität des 3D-Elementes steuern

Die Eigenschaft perspective legen Sie meist beim Elternelement fest. Geben Sie hier Werte mit einer Längenangabe an. Wenn Sie Werte ohne Längenangabe spezifizieren, so funktioniert das zwar in Webkit-Browsern, aber beispielsweise nicht im Firefox. Prinzipiell gilt dabei: Ein Wert unter 200 Pixeln wirkt übertrieben, ab 1.000 Pixeln hingegen nimmt man die Dreidimensionalität kaum mehr wahr.

Jetzt sehen Sie die Drehung im 3D-Raum. Die Perspektive können Sie auch direkt beim Element spezifizieren:

Wenn Sie aber mehrere Elemente haben, die transformiert werden sollen, empfiehlt es sich, die Perspektive beim Elternelement zu spezifizieren, damit alle Kindelemente sich im selben 3D-Raum befinden.

Perspektive für Kindelemente

Eine weitere wichtige Eigenschaft ist transform-style mit dem Wert preserve-3d. Um seine Auswirkung deutlich zu sehen, benötigen wir drei ineinander verschachtelte Elemente:

Das umfassende Element ist für die Perspektive zuständig. Im folgenden Beispiel wird auf eine Angabe der herstellerspezifischen Präfixe verzichtet, die vollständige Variante finden Sie aber selbstverständlich bei den Listings zum Artikel zum Herunterladen unter www.internet-magazin.de .

Das darin liegende Element hat eine blaue Hintergrundfarbe und wird um 50 Grad auf der Y-Achse gedreht:

Das innerste Element hat eine grüne Hintergrundfarbe, ist um 50 Grad auf der x-Achse gedreht und außerdem ist der Drehpunkt auf oben links gesetzt:

Wie man erwarten würde, ist .gedreht im 3D-Raum angeordnet, allerdings ist die 3D-Transformation bei .kindelement nicht zu sehen: Dieses befindet sich auf derselben Ebene wie sein Elternelement und ist deswegen nur gestaucht. Um es ebenfalls im 3D-Raum zu drehen, muss sein Elternelement noch zusätzlich transform-style: preserve-3d erhalten. Auch diese Angabe schreiben Sie mit den herstellerspezifischen Präfixen:

Jetzt bildet .gedreht den Bezugspunkt für die Drehung des Kindelements: Das grüne Element ragt heraus.

Die Rückseite

Wenn Sie ein Element um 180 Grad drehen, ist seine Rückseite zu sehen. Wollen Sie es ausblenden, wenn es umgedreht ist, legen Sie das über backface-visibility fest.

Das brauchen Sie beispielsweise, wenn Sie eine Spielkarte mit CSS realisieren. Dafür nehmen Sie zwei Bilder, die Sie mit position: absolute übereinander positionieren. Dann können Sie die Drehung animieren und sorgen mit backface-visibility: hidden dafür, dass, wenn die ursprünglich unten liegende Karte angezeigt wird, die gedrehte nicht zu sehen ist.