Webkit erlaubt es nun, 3D-Transformationen über CSS zu realisieren.
CSS Dreidimensional mit Webkit
Webkit unterstützt jetzt 3D Transformationen, womit Elemente auf Webseiten über CSS dreidimensional positioniert werden können. Damit das funktioniert, ist allerdings der aktuelle Nightly Build von Webkit in Version r46091 nötig. Diesen gibt es derzeit leider nur für Mac OS X.
Hier gibt es den Nightly Build Webkit r46091 für Mac.
Diese 3D-Funktionalität wird für das iPhone bereits seit Version 2.0 geboten. Man benötigt also das Betriebssystem Leopard oder später, sowie das aktuelle Webkit.
Was es mit dieser erweiterten CSS Transformation auf sich hat, kann man hier lesen.
Man verwendet die gleichen CSS-Eigenschaften, wie für 2D Transformationen. Will man zum Beispiel ein Element über die Y-Achse, also vertikal rotieren lassen, schreibt man folgendes:
-webkit-transform: rotateY(45deg);
Für die Funktion -webkit-transform gibt es diverse neue Eigenschaften. So lassen sich Elemente zum Beispiel auch in x, y und z-Richtung skalieren oder bewegen. Es lassen sich Perspektiven erzeugen und eine 4x4 3D-Matrix mit 16 Werten verwenden.
Hier gibt es eine Übersicht zum CSS 3D Transforms Module Level 3.
Weitere Informationen finden sich auch im Webkit-Blog.
