Ratgeber: "CSS"

3D-Elemente mit CSS erstellen

Wir zeigen Ihnen, wie Sie mit Hilfe von einfachen CSS-Befehlen beliebige Elemente der Website im dreidimensionalen Raum drehen, verzerren und verschieben.

3D-Elemente mit CSS erstellen

© Internet Magazin

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:

.gedreht {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45eg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

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.

.mehrere {
-webkit-transform:
rotate(7deg) scale(1.2);
-moz-transform:
rotate(7deg) scale(1.2);
-o-transform: rotate(7deg)
scale(1.2);
-ms-transform: rotate(7deg)
scale(1.2);
transform: rotate(7deg) scale(1.2);
-webkit-transform-origin: right
bottom;
-moz-transform-origin: right bottom;
-o-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom
}

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:

<div class="x"><img src="bild.jpg"
alt="Bild" /></div><div class="y"><img src="bild.jpg"
alt="Bild" /></div><div class="z"><img src="bild.jpg"
alt="Bild" /></div>

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.

.x img {
-webkit-transform: rotateX
(50deg);
-moz-transform: rotateX
(50deg);
-o-transform: rotate(50deg);
-ms-transform: rotateX
(50deg);
transform: rotateX(50deg);
}
.y img {
-webkit-transform:
rotateY(50deg);
-moz-transform:
rotateY(50deg);
-o-transform:
rotateY(50deg);
-ms-transform: rotateY(50deg);
transform: rotateY(50deg);
}
.z img {
-webkit-transform: rotateZ(50deg);
-moz-transform: rotateZ(50deg);
-o-transform: rotateZ(50deg);
-ms-transform: rotateZ(50deg);
transform: rotateZ(50deg);
}

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

internet, webdesign, css, 3D, transformationen

© Internet Magazin

Unterschiedliche Werte für die Perspektive: Von links nach rechts: 300 Pixel - 500 Pixel - 900 Pixel.

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.

div {
-webkit-perspective: 300px;
-moz-perspective: 300px;
-o-perspective: 300px;
-ms-perspective: 300px;
perspective: 300px;
}

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

transform: perspective(300px) rotateY
(50deg) ;

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:

<div class="container"><div class="gedreht"><div class="kindelement"></div></div></div>

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 .

.container {
perspective: 600px;
}

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

.gedreht {
transform: rotateY(50deg);
background-color: blue;
}

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:

.kindelement {
background-color: green;
transform-origin: top left;
transform: rotateX(50deg);
}

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:

.gedreht {
/* alles andere wie gehabt */
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}

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.

.gedreht {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}

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.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".