Recent builds of Apple's upcoming operating system, Snow Leopard, have enabled a rather nifty feature in the WebKit-based Safari 4 browser, dubbed 3D CSS transforms. During the weekend that has just passed, according to Ars Technica, developers of WebKit have now enabled these transforms for Leopard, too. Of course, don't expect anything in the software updates any time soon; it has only been patched into nightly builds so far.
Firstly, we'll explain how these work. Initially, the WebKit developers built "a series of two-dimensional transforms that can be applied with CSS properties", and nailed on the ability to animate them over a period of time. Mozilla's new Firefox update, 3.5, can also do this. If you want an example of this, check out Safari 4's welcome page. After having this all nice and finished, they started on bringing the technology to the third dimension, as well as enabling the GPU to help out with the processing. Ars Technica stated that this was initially built into iPhone OS 2.0, in order to give developers a way to create some rather complex visual effects without having to learn a whole load more. Afterwards, Apple has even submitted it to the W3C, so they can consider making it an official CSS standard. As mentioned, this was first enabled for Snow Leopard testers, but now Leopard folk can join in on the fun.
So, curious to see this in action? Charles Ying, a web developer, has created a 3D photo array to display some of the power that can be demonstrated here. First off, you'll need to get your mitts on a nightly build of WebKit, and then after that you're ready to go. Then you can follow the link from the website where the Snow Stack demo is hosted, which'll lead you to the demo itself. Of course, we've included a YouTube video below for those who can't try it out.
On a disappointing note, you'll need to be running Mac OS X to give this a whirl... it's yet to be enabled for Linux and Windows users. So, those running an Apple operating system, try this out and tell us how it goes.
43 Comments - Add comment