WebKit nightly builds enable 3D CSS transforms for OS X

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.

Report a problem with article
Previous Story

Microsoft CEO Steve Ballmer brushes off Chrome OS

Next Story

Additional Windows Marketplace for Mobile details revealed

43 Comments

Commenting is disabled on this article.

I tried in my macbook pro (bootcamp )

xp sp3 :will not work. In a updated safar the page shows the photo in flat 2d.
Leopard :it works fine but not quite equal as the video.

I've used Safari 4's welcome page... and it doesn't work like a real web page. You can't right-click, you can't drag objects for use in other programs, it works entirely differently than anything else on the web. You can't highlight text, there's weird GUI objects on there that aren't really part of HTML or anything... Why even refer to this as a "web page"? It's not... it's some weird proprietary thing.

Safari's welcome page?
element contains the sound, element contains the little movie of safari's icon, contains the "welcome to safari" text, contains the apple icon. Standard CSS technqiues to replace text with images, and some trivial javascript to handle the "animation" part of it (along with css3 transformations).

What's so unusual about that?

1) GPU rendering, Nice, what do all the Integrated GPU Mac Owners do? Watch the images crawl and jerk across the screen?

2) New Apple CSS standards, Nice, just what POed the world at Microsoft as they implemented them before they were accepted. (Oh it is Apple, we love Apple and shiny things... what were you talking about?)

3) These effects can already be done without moving to 3D, do people really not understand the virtual 3d surface concepts that you can already do?

4) Does anyone else see Apple as being a bit concerned about Silverlight and racing to do what they can to control the rich web UI, except you get their variations of the MPEG4 crappy codecs with HTML5 and no programming model. This lets you create everything yourself everytime, brilliant...


Get back to us when this is a standard and Opera and even IE support it, as people aren't going to develop pages that 70% of the world can't view...

this looks almost identical to the cool iris plugin for firefox which i have been playing with for about 3 months available for mac windows and linux - also allows you to brows your local pictures and files -- very coolfor a media center or for photo display wall

apple are just behind the open source crowd here but im sure people will wet their pants cos apple did it

Afterwards, Apple has even submitted it to the W3C, so they can consider making it an official CSS standard.

Another proprietary non-standard CSS "extension"...
Sorry, forgot we should only blame MS for that.

So with all this html5+svg+js+ogg video blindness where will all the hardware acceleration come from?
Where will i get my Dolby?
How will i have a media center/tv tuner?, will i have to have a separate device?
can html5+svg+js run crysis (i know its an old meme) but how much js/html/svg+css will be needed to run a 3d game?

All I see thats happening is people writing near excesscive amounts of code to do things that you can do simply in other runtimes.

I can't udate the webkit in my Safari 4 install anymore. With Safari 2/3 I could just download the zip, run the nightly cmd installer thingie and bam it was good to go. Now when I do this, Safari 4 just crashes as soon as I start it up. I sure wish I could update webkit with it.

Phantom Helix� said,
You can if you go back the 4 beta lol

I know, which I've done countless times after installing the newest nightly borked the install lol

I guess there's no way to update webkit with Safari 4 then?

Amazing. After months of being unable to update the webkit with Safari 4 beta and then the final release, I tried updating it tonight after my post earlier, and what do you think happened? Yup, updated just fine lol

Runs much smoother with the newer version of webkit like I was hoping it would, yay!

Mozilla and Webkit are trying to become another IE6 incident by this way. They flame the hell out of MS because of DirectShow filters, now they try to do it their own... God, when they have a little power, see what they can do...

Microsoft did it different, they went about it the wrong way.

Apple on the other hand is doing it the right way, hence why nobody has a problem with it.

If it had Microsoft promoting this everyone would be screaming for blood as it would be considered "non-standard" and yet another monopolistic move. Apple does it and all is right with the world.

iamwhoiam said,
If it had Microsoft promoting this everyone would be screaming for blood as it would be considered "non-standard" and yet another monopolistic move. Apple does it and all is right with the world.

Yeah, damn Apple doing these non-standard things!
Oh, wait:

(yes, I realise that it is still a draft)

Mathiasdm said,
Yeah, damn Apple doing these non-standard things!
Oh, wait:

(yes, I realise that it is still a draft)


everyone can propose a draft like that, as it says right on that page, it doesn't mean w3 endorses and maybe never will.

Let's not forget that microsoft did the same thing, some of their extensions to the standard css have become the standard (css pseudo classes for example) some did not (filters). So what's the difference? In a utopia all browsers agree on new features before implementing it and sending a draft.

The difference is in how they act. The Safari guys are working with other browser makers and the W3C on it, MS came up with the features and told everybody that's how they were going to be.

Microsoft's proprietary features weren't prefixed (vendor specific features are perfectly fine if they're prefixed), and in a few cases (like DirectX filters) violated CSS parsing rules. MS fixed those issues in IE8 standards mode, all proprietary MS rules need to be prefixed, and their DirectX filters need to be written according to the parsing rules.

Of course, if Apple implemented the feature without prefixes and with invalid grammar and just said "that's how it's going to be", people would be annoyed just like they were with MS.

Edit: Commenting system fails at Unicode.

The_Decryptor said,
The difference is in how they act. The Safari guys are working with other browser makers and the W3C on it, MS came up with the features and told everybody that's how they were going to be.

Microsoft's proprietary features weren't prefixed (vendor specific features are perfectly fine if they're prefixed), and in a few cases (like DirectX filters) violated CSS parsing rules. MS fixed those issues in IE8 standards mode, all proprietary MS rules need to be prefixed, and their DirectX filters need to be written according to the parsing rules.

Of course, if Apple implemented the feature without prefixes and with invalid grammar and just said "that's how it's going to be", people would be annoyed just like they were with MS.

Edit: Commenting system fails at Unicode.


*BullCr*p*

1) You are mis-representing Microsoft's active participation in the web standards and seem to forget that a large portion were written by Microsoft.

2) You keep talking about DirectShow, and this is the least of the examples people complain about, as 99% of what is complain about IE and Microsoft are either 'draft' implementations or features handled outside the standards. (Which is exactly what Apple is doing.)

3) As the OP said, this is the classic, Apple does it 'right' and MS does it wrong, yet when light is shed on the process or the facts, there are either no difference or Microsoft had more 'standards' to stand on.

People forget that a lot of the Trident core IE is built around was working with HTML before standards existed to handle features REQUIRED at the time, and because the industry didn't tilt towards the IE proposed methology really wasn't something MS was doing to be evil, but just how it worked out in the end. If anything the standards were being a bit evil by specifically targeting IE handling and purposely not implementing it.

So if you want to bitch about anything IE does in page handling, you can't come in here and say what Apple is doing is 'good' in any way. PERIOD.

The_Decryptor said,
The difference is in how they act. The Safari guys are working with other browser makers and the W3C on it, MS came up with the features and told everybody that's how they were going to be.

Microsoft's proprietary features weren't prefixed (vendor specific features are perfectly fine if they're prefixed), and in a few cases (like DirectX filters) violated CSS parsing rules. MS fixed those issues in IE8 standards mode, all proprietary MS rules need to be prefixed, and their DirectX filters need to be written according to the parsing rules.

Of course, if Apple implemented the feature without prefixes and with invalid grammar and just said "that's how it's going to be", people would be annoyed just like they were with MS.

Edit: Commenting system fails at Unicode.


I fail to see how using prefixes changes anything. It still remains css code on which not all major browser makers agree, which hasn't been even drafted by w3 (the draft you are refering to is an editor draft, aka, every idiot can send it in). And people will start relying on a feature that differs in implementation from browser to browser.

So, according to you, the steps are:

- make some css rules your browser understands
- release your browser
- send a draft to w3c and hope for the best or de-facto acceptance

I'm sorry, that's just stupid, it should be:

- make an efficient w3 committee
- make a draft
- make a standard on the draft
- implement standard

I don't care if its is IE, firefox, webkit or opera. When will they finally learn to do what is best for the developer and thus general web user. How long has css 3 been in draft version? 5 years? That's just stupid!

Neat, but obviously needs to be ratified by the W3C and then supported in the other browsers to be of real use. All because it has been submitted doesn't mean it will be accepted.

Except that you can do pretty much anyything else 3D transformation-related too. :D

Looks great to me, I hope it catches on, perhaps after approval as a standard! Anything to not have to rely on plugins, please.

@Juhulator
Why? At least with plug-ins, you have a choice not to install it. If a plug-in can do more stuff with better performance, then why not? I don't really wanna be stuck with an implementation of a standard that is sub-par to the alternatives. Especially when it is tuned for one OS with no feedback from the creators of other OS.

As a developer myself i crave the day that you don't have to rely on users to have certain plugins installed.
Anyway who said that plugins have to have better performance?

Strange, running Firefox 3.5 and it doesn't work (both demo and Safari 4 welcome page) but it is working in Safari 4.0.2 but only in 2D. When running the webkit nightly build from 14 july it enables the 3D interface when scrolling. In Safari and in webkit scrolling only works when using the arrow keys, the scroll ball on the mighty mouse doesn't work. However, when scrolling fast it's a completely different world regarding speed and smoothness from what is being demoed in the youtube movie. It's jerky. If you scroll in a normal pace it's pretty neat

I imagine it's coming for Windows and Linux, since it has been submitted as a standard, but my guess is that the code for the GPU acceleration is OS-dependent. Since OS X is where Safari/WebKit started and has the most market share (iirc), and the developers are mostly Mac users (again, iirc), OS X is the place to start.

awesome. finally like in the show "reboot" we get to view websites in actual floating sheets. that'd be very nice for websites that show high res shots from movies.