3D-Transforms in Webkit
3D-Animationen im Browser mit CSS, ohne JavaScript oder Plug-ins
Die Browser-Engine Webkit unterstützt in der aktuellen Entwicklerversion sogenannte 3D-Transforms. Damit lassen sich Elemente auf Webseiten im dreidimensionalen Raum positionieren und in Kombination mit CSS Transitions bewegen.
Apples Safari Mobile unterstützt 3D-Transforms schon seit der Veröffentlichung von iPhoneOS 2.0. Nun halten sie auch in der Desktopversion von Webkit Einzug. Webkit implementiert die von Apple stammende, noch unfertige W3C-Spezifikation für CSS 3D Transforms Module Level 3.
Die 3D-Transforms ermöglichen die Positionierung von Elementen auf einer Webseite im dreidimensionalen Raum mittels CSS. Kombiniert mit CSS Transitions lassen sich so Animationen ohne JavaScript oder Plug-ins erzeugen. Sie werden allein in CSS definiert und können hardwarebeschleunigt ausgeführt werden.
Dabei erweitern die 3D-Transforms die schon länger in Webkit enthaltenen 2D-Transforms und werden wie diese mit "-webkit-transform:" eingebunden. Dabei stehen aber in den aktuellen Nightly-Builds von Webkit neue Funktionen zur Verfügung.
Zu diesen zählen "translate3d" und "translateZ", mit denen sich Elemente im dreidimensionalen Raum bewegen lassen. Mit dem Parameter z kann das Element näher oder weiter vom Nutzer positioniert werden. Mit "scale3d" und "scaleZ" lassen sich Elemente vergrößern, wobei über scaleZ die Skalierung transformierter Kind-Elemente entlang der Z-Achse definiert wird.
Zum Rotieren von Elementen stehen "rotateX", "rotateY" und "rotate3d" zur Verfügung. Mit "perspective" kann ein Perspektiveneffekt für einzelne Elemente definiert werden. Ergänzt wird dies durch "-webkit-perspective", was sich dann auf alle Elemente bezieht und anhand von Größenveränderungen entlang der Z-Achse den Eindruck von Tiefe vermitteln soll. Für komplexe Transformationen steht "matrix3d" zur Verfügung. Mit "-webkit-backface-visibility" lässt sich zudem festlegen, ob Objekte durchsichtig sind oder nicht.
Die 3D Transforms funktionieren mit aktuellen Nightly Builds von Webkit unter MacOS X ab Version 10.5 alias Leopard. Unter Windows funktionierten die Beispiele nur eingeschränkt. Details zu den unterstützten 3D-Funktionen erläutern die Webkit-Entwickler in einem Blogeintrag.
Ich find ja das* viel beeindruckender.. *http://yocode.de/work/jscript/flip/flip.html
Microsoft Windows.
Dann lad die die neueste Webkit Version oder nimm ein iPhone oder einen iPod Touch, geh...
vrml gibt es schon ewig - hat nur niemand interessiert, obwohl es sogar der ie konnte.
Das sind (wenn man den Quellcode betrachtet) alles 2D Transformationen, die einfach zu...
Kommentieren