Accelerated CSS Transforms
Recently the WebKit team added support for CSS transformations with 3D GPU acceleration. This means that soon we can built web applications that mimic desktop applications in graphical responsiveness. Charles Ying wrote a simple image gallery application that demos this new functionality.
This is definitely not yet ready for end users but it demonstrates the power of the web platform and where it is heading. With the native video tag, local and session storage, plus much faster JavaScript engines, browsers are changing from simply presenting information to being a fully interactive platform. It’s no surprise that Google is developing a web-browser operating system, called Chrome OS.
It is also quite encouraging to see the second browser war bring fresh ideas and increase the possibilities to the browser. Competition is great.
Snow Stack in WebKit Nightly r46091
The CSS Transforms were originally created at Apple by Dean Jackson, David Hyatt and Chris Marrin for the iPhone. Apple then improved the spec and submitted it to standardization at the W3C. Firefox 3.5 supports 2D css transforms but does not yet support the newer accelerated 3D animations.
So how does it work?
The images are put on the page using standard CSS and HTML, and they are then animated by JavaScript using these CSS properties:
-webkit-transition-property: -webkit-transform;
-webkit-transform: rotateY(45deg);
-webkit-transition-duration: 2s;
The transition property is set to transform, the transform is set to rotate the image in Y-space by 45 degrees, and the duration is set to 2s. With that, the web browser will take the current position of the image and rotate it by 45 degrees in 2 seconds, which produces an animation effect. How beautifully simple it is!