3D CSS transforms available in Leopard via WebKit nightlies

A couple weeks ago, we noted that Apple’s 3D CSS Transforms were slowly coming to the desktop via Safari 4, at least on Snow Leopard. Over this past weekend, though, WebKit developers put in a small patch that enables 3D CSS transforms in the latest nightly build of WebKit for Leopard, too.

The WebKit team developed a series of two-dimensional transforms that can be applied with CSS properties, then added the ability to animate them over time. Those transforms were used for the Safari 4 “welcome page” that is loaded whenever Safari 4 is first launched. Mozilla recently implemented support for two-dimensional transforms in the Gecko 1.9.1 rendering engine, which is used in Firefox 3.5.

The WebKit team later extended the transforms to work in three dimensions and then added the ability for the transforms to be rendered using a GPU, saving valuable CPU cycles for other work. The 3D transforms first became available in iPhone OS 2.0 so that Web app developers could add some advanced visuals with no additional programming expertise. Apple eventually submitted the revised 3D CSS transforms to the W3C for consideration as an official CSS standard. Since then, Apple enabled them in Snow Leopard builds of Safari 4, but had until this weekend left Leopard users out of the fun.

Comments on a bug report requesting the feature to be added to desktop versions of WebKit suggested that there were technical limitations that prevented support for the 3D transforms in Leopard. But a look at the code changes indicates that checks for Leopard were merely removed from the build process so that the feature would be “turned on” for Mac OS X versions 10.5 and above.

Charles Ying’s Snow Stack running in WebKit build r45788, on Mac OS X 10.5.7

Leopard users can now get a feel for what the transforms can do by looking at several demos.

Web developer Charles Ying has put together an impressive photo browser called Snow Stack, which pans a series of photos in 3D and allows a better look at each image by zooming it “closer” to the viewer.

Chicago-based developer Peter Zich also updated demos he created for the iPhone to work on the desktop as well, including his 3D “model” of a van and an impressive 3D photo browser that spins on all three axes.

A cursory look at performance indicates that moving the transform functions to the GPU results in a much lower use of the CPU. These demos purr along in the newest WebKit on Leopard, while running even simple 2D transforms in Safari 4 on Leopard can crank up the CPU on my (admittedly) aging first-gen MacBook.

Results in Snow Leopard appear to be perhaps an order of magnitude better—while Snow Stack runs very smoothly in Snow Leopard, it does occasionally suffer from sputters and frame drops on Leopard. This suggests that something in the graphics pipeline of Snow Leopard is more optimized than Leopard, and may be the reason the WebKit team was reluctant to enable the feature on Leopard before now.

Peter Zich’s 3D Image Fly running in WebKit build r45788, on Mac OS X 10.5.7

Support for the 3D transforms has yet to be enabled for Windows or Linux platforms, though the team has encouraged the filing of bug reports for those platforms requesting that support be added. And while Firefox 3.5 has its own support for CSS transforms on those platforms, unlike WebKit it doesn’t yet support the Z axis and also doesn’t yet support GPU acceleration.

There is already an effort underway to create a full JavaScript-based API for creating 3D graphics within a browser, but the 3D CSS transforms offer those without experience in complex 3D programming a way to add 3D effects using the skills they already have. Progress from both the Mozilla and WebKit teams suggests that such 3D effects will become more mainstream as support for the standard grows, on mobile platforms as well as on the desktop. And from the looks of these early demos, it seems like we can expect some impressive things to come.

Further reading: