Das WebKit-Entwicklerteam hat im März 2009 3D-Transforms vorgeschlagen, die es erlauben, Elemente einer Webseite in einem dreidimensionalen Raum anzuzeigen [1]. Das Feature wurde in Safari, Chrome und für iOS und Android implementiert. Mittlerweile hat auch Firefox die Eigenschaft eingebaut, sodass die Technologie für Webworker durchaus attraktiv ist.

Konkret funktionieren 3D-Transforms jeweils ab Chrome 12, Firefox 10, Safari 4, iOS Safari 3.2, Android Browser 3.0 [2]. Der Internet Explorer will ab Version 10 dabei sein. Opera ist noch außen vor, aber auch hier soll eine Umsetzung in Arbeit sein.

3D-Transforms fügt der Webseite eine z-Achse hinzu, auf der Elemente bewegt werden können. Dabei handelt es sich um eine „echte“ z-Achse, im Gegensatz zum bekannten z-Index. Analog zu 2D-Transformationen werden auch die Änderungen in drei Dimensionen mit einer einzelnen CSS-Eigenschaft angewendet.

#element{
 -webkit-transform: foo bar;
 -moz-transform: foo bar;
 -ms-transform: foo bar;
 -o-transform: foo bar;
 transform: foo bar;
 }

Nun kommen verschiedene weitere Eigenschaften und 3D-Funktionen hinzu. So drehen sich Elemente mit rotateX(Winkel), rotateY(Winkel) bzw. rotateZ(Winkel) um die entsprechende eigene Achse. In der folgenden Abbildung sind die Bilder jeweils in einem DIV untergebracht. Bild 1 zeigt das Original, Bild 2 ist über rotateX um 45 Grad, Bild 3 über rotateZ ebenfalls um 45 Grad gedreht.

Während Bild 3 richtig gedreht aussieht, wirkt Bild 2 gestaucht und wenig dreidimensional. Das liegt an der Eigenschaft „transform-style“. Initial steht dieser Wert auf „flat“ und sorgt dafür, dass Kindelemente flach auf das Elternelement projiziert werden. Die Eigenschaft „transform-style: preserve-3d“ beim Eltern-DIV sowie ein Wert für die Perspektive – etwa „perspective: 200px“ – sorgen bei Drehungen um die x- oder y-Achsen für den echten 3D-Effekt.

„Perspective“ kann dabei als Abstand zum Objekt gesehen werden. Die technische Erklärung ist etwas komplexer, aber grob gesagt beeinflusst die Eigenschaft den Grad der 3D-Verzerrung.

div {
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-perspective: 200px;
 -moz-perspective: 200px;
 -ms-perspective: 200px;
 -o-perspective: 200px;
 perspective: 200px;
}
div img {
 -webkit-transform: rotateX(45deg);
 -moz-transform: rotateX(45deg);
 -ms-transform: rotateX(45deg);
 -o-transform: rotateX(45deg);
 transform: rotateX(45deg);
}

Mit 3D-Transforms lassen sich Elemente auf der x-, y- und z-Achse auch bewegen oder skalieren. Hier lohnt ein Blick in die Spezifikationen [1]. Außerdem können 3D-Transforms für hübsche Effekte mit Transitions und Animations verknüpft werden [3].

Das WebKit-Team brachte auch CSS-Maskierungen ins Spiel [4]. Im Gegensatz zu 3D-Transforms gibt es zu den Masken aber lediglich ein Proposal und keinen W3C-Working-Draft. Die Eigenschaften funktionieren ab Chrome 17, Safari 5, im aktuellen iOS-Safari und Android-Browser. In der einfachsten Form lässt sich mit der Eigenschaft „-webkit-mask-image“ ein transparentes PNG hinzufügen. Das Bild wird wenn nötig gekachelt, um den gegebenen Platz auszufüllen, und dient dann als Maske.

Alternativ kann man die Maske auch über „-webkit-mask-box-image“ verwenden; in diesem Fall wird die Maske allerdings gestreckt, um die Dimensionen des Bilds auszufüllen.

<img xsrc="blumen.jpg" alt="..." style="-webkit-mask-box-image: url(maske.png);" />

In der Maske selbst können auch Verläufe genutzt werden. Statt transparenter PNG-Bilder sind auch CSS-Gradienten und SVG-Dateien möglich. Außerdem lassen sich mehrere Masken übereinanderlegen oder mittels der „border-image“-Syntax verknüpfen.

In den WebKit-Engines stecken noch weitere CSS-Features, die andere Browser (noch) nicht bieten [5]. Vor einiger Zeit war es etwa schick, Bilder direkt darunter gespiegelt darzustellen. Für solche Reflexionen bietet WebKit eine eigene Syntax.

-webkit-box-reflect: below 5px;
-webkit-box-reflect: below 0 url(maske.png);

Die Reflexion können „above“, „below“, „left“ oder „right“ angezeigt werden. Außerdem ist der Abstand zum Original nötig; die Kopie erscheint dann entsprechend gespiegelt neben dem Bild. Außerdem lässt sich leicht eine Maske hinzufügen, um die Reflexion etwa über einen Verlauf in der Maske auszublenden.

Ebenso nur bei WebKit-Browsern zu haben: Outline für Texte. Die Syntax ist auch hier sehr einfach: Per „-webkit-text-stroke“ gibt man einem Text in Shorthand-Schreibweise Dicke und Farbe mit. Außerdem kann letztere transparent gesetzt werden, um nur die Kontur anzuzeigen.

color: transparent;
-webkit-text-stroke: 2px #09C;

In Firefox, Opera und Internet Explorer 10 steht zwar kein „text-stroke“ zur Verfügung, der Effekt lässt sich aber durch vier Textschatten simulieren, indem mit „text-shadow“ jeweils ein Schatten um ein Pixel nach oben, unten, rechts und links verschoben wird. Allerdings wirkt das nur bei einem Pixel Dicke einigermaßen sauber. Darüber hinaus werden Lücken in der Outline sichtbar [6]. Insofern hat „text-stroke“ durchaus seinen Sinn und findet vielleicht seinen Weg in die CSS-Spezifikationen.

Außerdem sorgt WebKit für ein Wiedersehen mit alten Bekannten: Marquee-Texten, also Laufzeilen. Dafür gibt es bereits das HTML-Element <marquee>. Dieses wurde einst von Microsoft eingeführt und gehört nicht zum HTML-Standard. Allerdings wird das Element tatsächlich von IE, Chrome, Firefox, Safari und Opera unterstützt. WebKit bietet nun außerdem eine Marquee-Lösung per CSS an, die zusätzliche Konfigurationen erlaubt.

-webkit-marquee: direction increment repetition style speed

Neben Richtung und Geschwindigkeit lässt sich etwa die Anzahl der Wiederholungen festlegen. Der Style regelt, ob sich der Lauftext hin- und herbewegt oder sich in der festgelegten Richtung wiederholt. Das Problem mit Lauftexten aber ist die Geschwindigkeit: Für einige bewegt sich der Text zu schnell, für andere zu langsam. Allerdings mag die Eigenschaft für kleine Bildschirme hilfreich sein, wenn tatsächlich nur etwas Platz fehlt, um zwei, drei Wörter darzustellen. Statt die Box zu vergrößern oder den Text abzuschneiden, kann ein CSS-Marquee eine sinnvolle Alternative sein.

Der Autor

Nicolai Schwarz arbeitet als selbstständiger Designer und Webentwickler in Dortmund. Hauptsächlich beschäftigt er sich mit der Konzeption und Umsetzung von Drupal-Projekten. Nebenbei ist er als Redakteur und Autor bei den Webkrauts tätig. Im September ist sein Fachbuch über Drupal 7im Galileo Verlag erschienen.