3D-Transforms in Webkit
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(öffnet im neuen Fenster).
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(öffnet im neuen Fenster) 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(öffnet im neuen Fenster).
- Anzeige Hier geht es zum Handbuch für Softwareentwickler bei Amazon Wenn Sie auf diesen Link klicken und darüber einkaufen, erhält Golem eine kleine Provision. Dies ändert nichts am Preis der Artikel.