Webkit: 3D-Transformationen mit CSS
In den neuen Nightly-Builds des Webkit-Projekts, auf dem Apples Safari basiert, lassen sich 3D-Transformationen wiedergeben.
- Henning Behme
Wie einem Blog-Eintrag des Webkit-Projekts zu entnehmen ist, verfügen neue Nightly-Builds des Webbrowsers Webkit über die Fähigkeit, 3D-Animationen darzustellen. Die Entwickler setzen dabei auf einem Entwurf für CSS 3D Transforms Module Level 3 auf, dessen erste Fassung Apple-Entwickler im März dieses Jahres als W3C (World Wide Web Consortium)-Working-Draft eingereicht haben. Auf iPhones lassen sich derlei Transformationen schon seit Version 2.0 des Betriebssystems realisieren.
Grundlage der CSS-3D-Transformationen sind Eigenschaften wie -webkit-transform, das Werte wie rotateX/rotateY/rotateZ und rotate3d haben kann. Dasselbe gilt für translate. Außerdem können Entwickler eine 4×4-Matrix per matrix3d nutzen.
(Bild: Webkit)
(Bild: Webkit)
Mit CSS (Cascading Style Sheets) und ein paar JavaScript-Funktionen hat Blog-Autor Simon Fraser sowohl Rotation als auch die 3D-Transformationen vorgeführt (einen Eindruck geben die Abbildungen wieder). In der rechten Abbildung etwa verschwindet die Hinteransicht der verdeckten Seiten durch Ausnutzung von -webkit-backface-visibility.
Um die Beispiele auszuprobieren, müssen Anwender als Betriebssystem Leopard sowie eine aktuelle Webkit-Version per Download auf ihrem Rechner haben. (hb)
