3D CSS transforms available in Leopard via WebKit nightlies

Apple's WebKit developers finally saw fit to flip the switch on 3D CSS transforms for Leopard users. Performance isn't yet optimized, but the demos provide a glimpse at what the transforms enable.<BR><BR><a href='http://meincmagazine.com/apple/news/2009/07/3d-css-transforms-available-in-leopard-via-webkit-nightlies.ars'>Read the whole story</a>

 

[David Bradbury]

Is Apple basing the feature set of the 3D CSS on Motion / Core Animation, or is this something completely different? I really think they got keyframing (or lack thereof) right with Motion -- if we could somehow get a development environment like it for 3D CSS it would be amazing.

 

[fjpoblam]

That 3D Image Fly is utterly amazing. I've been perusing [or should I say, poring over] "All you ever needed to know about CSS3" ... http://www.css3.info/ ...and seen no hint. Guess I need to start again.

 

[foresmac108]

<BLOCKQUOTE class="ip-ubbcode-quote"><div class="ip-ubbcode-quote-title">quote:</div><div class="ip-ubbcode-quote-content">Is Apple basing the feature set of the 3D CSS on Motion / Core Animation, or is this something completely different? </div></BLOCKQUOTE><BR>I believe on Mac OS X it is tied into Core Animation, but that is just speculation on my part. I couldn't get anyone involved to comment on the technology involved.<BR><BR>However, making a Motion-like dev environment would probably be possible to implement by using WebKit as a preview renderer. If the project only used 2D transforms, then it could also generate code that would work in Mozilla/FF3.5. But since the standard isn't yet approved, it might be premature for someone to attempt such an app.

 

[bentruyman]

I asked this when the last story about this came out and never got an answer.<BR><BR>But doesn't this stuff already work in Safari 4 for Leopard? I'm using Version 4.0.1 (5530.18) and all this stuff already works. The demos (well, the two that were properly linked to) all worked.<BR><BR>http://webkit.org/blog-files/leaves/index.html<BR><BR>I might also add I've been doing CSS transforms tests on both Firefox and Safari for several weeks now.<BR><BR>As a web developer, I'm confused as to what the author of this post means...

 

[foresmac108]

<BLOCKQUOTE class="ip-ubbcode-quote"><div class="ip-ubbcode-quote-title">quote:</div><div class="ip-ubbcode-quote-content">Originally posted by fjpoblam:<BR>That 3D Image Fly is utterly amazing. I've been perusing [or should I say, poring over] "All you ever needed to know about CSS3" ... http://www.css3.info/ ...and seen no hint. Guess I need to start again. </div></BLOCKQUOTE>Try starting here: http://www.w3.org/TR/css3-3d-transforms/

 

[Pete Zich]

<BLOCKQUOTE class="ip-ubbcode-quote"><div class="ip-ubbcode-quote-title">quote:</div><div class="ip-ubbcode-quote-content">Originally posted by bentruyman:<BR>I asked this when the last story about this came out and never got an answer.<BR><BR>But doesn't this stuff already work in Safari 4 for Leopard? I'm using Version 4.0.1 (5530.18) and all this stuff already works. The demos (well, the two that were properly linked to) all worked. </div></BLOCKQUOTE><BR><BR>It is only partially supported in Safari 4 (at least the 4.0.2 I'm using), my copy of Safari 4 scales the images in a 2D space but does not actually have a genuine 3D perspective. If you look at http://web.me.com/pzich/3DSpin/ (my quick test) you should see a rectangle and squished coin on Safari 4, and a trapezoid and actual spinning coin in WebKit.

 

[foresmac108]

<BLOCKQUOTE class="ip-ubbcode-quote"><div class="ip-ubbcode-quote-title">quote:</div><div class="ip-ubbcode-quote-content">Originally posted by bentruyman:<BR>I asked this when the last story about this came out and never got an answer.<BR><BR>But doesn't this stuff already work in Safari 4 for Leopard? I'm using Version 4.0.1 (5530.18) and all this stuff already works. The demos (well, the two that were properly linked to) all worked. </div></BLOCKQUOTE>The demos will load, but do not function properly in Safari 4 on Leopard (10.5.x). The link to the 3D Van got borked when saving, but should be fixed now. You'll note in Safari 4 on Leopard it appears flat and only rotates on one axis.<BR><BR><BLOCKQUOTE class="ip-ubbcode-quote"><div class="ip-ubbcode-quote-title">quote:</div><div class="ip-ubbcode-quote-content">http://webkit.org/blog-files/leaves/index.html </div></BLOCKQUOTE>This only uses 2D CSS animations, not any 3D transforms or animations.<BR><BR><BLOCKQUOTE class="ip-ubbcode-quote"><div class="ip-ubbcode-quote-title">quote:</div><div class="ip-ubbcode-quote-content">I might also add I've been doing CSS transforms tests on both Firefox and Safari for several weeks now.<BR><BR>As a web developer, I'm confused as to what the author of this post means... </div></BLOCKQUOTE>Specifically, this is referring to 3D transforms, which are <I>not</I> supported by Firefox (see the link in the article, it covers this detail) nor are they supported by Safari 4 <I><B>except</B></I> on Snow Leopard.<BR><BR>If you download and install the latest WebKit nightly build (currently r45855) you will see a serious difference.<BR><BR>I wanted to post videos of these demos in action, but unfortunately I could not get an acceptable frame rate while running screen recording software. However, Charles Ying posted a video on YouTube of Snow Tack running in Safari 4 on a developer preview of Snow Leopard (10.6).

 

[Ambiorickx]

This is all very awesome, but I dread the day advertisers get a hold of this. Will this stuff be blockable, in the manner of ClickToFlash?

 

[tigas]

Should I try to test this on my PowerBook G4?<BR><BR>For the aw shucks?

 

[ltcommander.data]

I don't suppose it'll be just as easy to activate 3D CSS transforms in OS X Tiger just by disabling initialization checks? If it's relying on Core Animation for GPU acceleration then that would be problematic, but if it's just Core Image/Core Video, then Tiger should have accelerated transforms too even if the graphics pipeline isn't as optimized. It'll be interesting to see if this will be implemented in the Windows version of Safari.

 

[WiseWeasel]

@hderycke: The only time a 3D CSS element would be useful for advertising would be for interactive ads. For everything else, there's no advantage over pre-rendering and using a video ad. I'm sure AdBlockPlus will find a way to block them, but I don't really see any reason to believe they would be anymore annoying than current Flash ads.

 

[webster]

As a developer I'd love to dive into this, but I'm kind of scared this is a neat technology demo that is still very far from real world viability. <BR><BR>Can we assume this will literally ship enabled with Snow Leopard and that ALL SL machines will be able to take advantage of this? Can we reasonably assume that it will get enabled in a point release of Safari on Leopard (will still work but just a little bit slower)? <BR><BR>Can we reasonably assume that the Mozilla people will fully jump on this and implement this in a totally compatible way by say Firefox 4? <BR><BR>Basically what I'm getting at is whether or not this will eventually be a standard supported by all none-IE browsers in use? I don't see that happening before 2011. If that were the case, learning this now might be worth it in order to get a head start and develop something really neat and killer. Otherwise its dead in the water.

 

[lyngvi]

I'd really like to know when there's at least one standard for this. It'd be nice to see some real experimentation with 3D UI's (Compiz provides some 3D effects for fundamentally 2D UI, sorry.) But I really don't want to be bothered reimplementing the same work on multiple versions of IE, Firefox, Opera, Safari, and Chrome. It's bad enough *with* the standards.<BR><BR>And hey, the nontrivial math you need to do decent 3D work might help separate the wheat from the chaff in the web development world. Major bonus for those devs out there who take pride in their work.

 

[Ambiorickx]

<BLOCKQUOTE class="ip-ubbcode-quote"><div class="ip-ubbcode-quote-title">quote:</div><div class="ip-ubbcode-quote-content">Originally posted by WiseWeasel:<BR>I don't really see any reason to believe they would be anymore annoying than current Flash ads. </div></BLOCKQUOTE><BR><BR>That's plenty annoying already.

 

[Ueffo Beeblenarf]

<BLOCKQUOTE class="ip-ubbcode-quote"><div class="ip-ubbcode-quote-title">quote:</div><div class="ip-ubbcode-quote-content">Originally posted by hderycke:<BR>This is all very awesome, but I dread the day advertisers get a hold of this. Will this stuff be blockable, in the manner of ClickToFlash? </div></BLOCKQUOTE><BR><BR>It's CSS...of course you can block it or parts of it.

 

[bentruyman]

Thanks for clearing that up for me Chris. After playing around with this stuff for a bit it seems like the new CSS functions available make it so we don't need to use things like skew and rotate together, rather, we can just use rotate3d. Very nice.

 

[maddog_uk_69]

The IE team at MS must see stuff like this and just crap themselves.

 

[ajmas]

A few questions:<BR> - Is 3D CSS part of a w3c spec?<BR> - Does anyone know whether Opera will get any of this?<BR> - What Firefox version will likely see support for this?<BR><BR>I am not going to ask about IE, since with their stance on HTML5 I am going to assume that MS doesn't care.<BR><BR>Edit: This link answers my first question: http://www.w3.org/TR/css3-3d-transforms/

 

[Pete Zich]

Right now all of these properties come with the "-webkit-" prefix, meaning these particular examples are WebKit-only. However, I did just find http://hacks.mozilla.org/2009/...-transforms-isocube/ and will check it out.

 

[ajmas]

Pete, thanks for the clarification. The cube demo works nicely, though only in Firefox and Safari (it fails in Opera)<BR><BR>These changes only appear to be in the Mac build of webkit for the moment, since downloading the latest Windows nightly did not offer the 3D support. Anyone know when we can expect this in a Windows build? I am not sure which bugzilla entry is tracking this feature?<BR><BR>Edit: just seen that Pete's referenced cube demo is using -moz* and -webkit* properties.<BR><BR><I>This comment was edited by ajmas on July 15, 2009 14:38</I>

 

[foresmac108]

<BLOCKQUOTE class="ip-ubbcode-quote"><div class="ip-ubbcode-quote-title">quote:</div><div class="ip-ubbcode-quote-content">- Does anyone know whether Opera will get any of this?<BR>- What Firefox version will likely see support for this? </div></BLOCKQUOTE>I know that people on the Mozilla team are already contemplating adding 3D support. There has been some problem integrating with Glitz, which is an OpenGL backend for Cairo, and so there is work to build something that accesses OpenGL directly, I believe. Full support of the 3D transforms may have to wait on that, though that project was proposed in April 2008 and hasn't been updated since then. It's also possible to render the stuff in software, which is what Safari 4 currently does with 2D transforms.<BR><BR>Opera's plans are anyone's guess, but I've put in inquiries into both companies; we'll see if either is willing to go on record pledging support. The current proposed spec is still a draft, though.<BR><BR><BLOCKQUOTE class="ip-ubbcode-quote"><div class="ip-ubbcode-quote-title">quote:</div><div class="ip-ubbcode-quote-content">Anyone know when we can expect this in a Windows build? </div></BLOCKQUOTE>As I said in the article, the WebKit team has encouraged filing of bug reports requesting that support be added to the Windows and Linux builds of WebKit, but I haven't been able to find an instance of anyone doing so as of yesterday.

 

[tigas]

<BLOCKQUOTE class="ip-ubbcode-quote"><div class="ip-ubbcode-quote-title">quote:</div><div class="ip-ubbcode-quote-content">Originally posted by tigas:<BR>Should I try to test this on my PowerBook G4?<BR><BR>For the aw shucks? </div></BLOCKQUOTE><BR><BR>MWAAHAAHAAA! It works!!<BR><BR>Like a slideshow, but it works!<BR><BR>All but Snow Stack, for some reason.

 

[Michael Kingery]

so nobody has heard of or used "cooliris"?<BR><BR>http://www.cooliris.com/<BR><BR>it will change your life if you look for stock or reference photos at work.

 

[foresmac108]

<BLOCKQUOTE class="ip-ubbcode-quote"><div class="ip-ubbcode-quote-title">quote:</div><div class="ip-ubbcode-quote-content">Originally posted by ajmas:<BR>Anyone know when we can expect this in a Windows build? I am not sure which bugzilla entry is tracking this feature? </div></BLOCKQUOTE>I could not find a related bug report in WebKit's bugzilla. I went ahead and opened a bug report to request support be enabled in Windows builds. https://bugs.webkit.org/show_bug.cgi?id=27314<BR><BR>Feel free to spread this link around, and encourage web devs/Windows users that want to see this feature enabled on Windows to comment on it.

 

[fferitt25]

<BLOCKQUOTE class="ip-ubbcode-quote"><div class="ip-ubbcode-quote-title">quote:</div><div class="ip-ubbcode-quote-content">Originally posted by David Bradbury:<BR>Is Apple basing the feature set of the 3D CSS on Motion / Core Animation, or is this something completely different? I really think they got keyframing (or lack thereof) right with Motion -- if we could somehow get a development environment like it for 3D CSS it would be amazing. </div></BLOCKQUOTE><BR><BR>It's called - open a text editor and write some friggin' CSS - not hard dude!<BR><BR>CSS is not much without at least HTML or XML to view anything. Then the motion effects come probably thru javascript (or as Foresmac108 implied maybe Apple's pushing it thru Core Animation right now - that's a system level Mac OS X implmentation for rendering real time 3D in the system - think Cover Flow. And the final component - you actually need the iamges themselves.<BR><BR>Besides running these effects thru web code cuts down on computer resources as the article mentions. Building this in Motion just to throw it on the web - it would be easier in Director of Flash to do the same thing.<BR><BR>Use the right tool for the job.<BR>===============================<BR><BR><BR><BLOCKQUOTE class="ip-ubbcode-quote"><div class="ip-ubbcode-quote-title">quote:</div><div class="ip-ubbcode-quote-content">Originally posted by foresmac108:<BR><BLOCKQUOTE class="ip-ubbcode-quote"><div class="ip-ubbcode-quote-title">quote:</div><div class="ip-ubbcode-quote-content">Is Apple basing the feature set of the 3D CSS on Motion / Core Animation, or is this something completely different? </div></BLOCKQUOTE><BR>I believe on Mac OS X it is tied into Core Animation, but that is just speculation on my part. I couldn't get anyone involved to comment on the technology involved.<BR><BR>However, making a Motion-like dev environment would probably be possible to implement by using WebKit as a preview renderer. If the project only used 2D transforms, then it could also generate code that would work in Mozilla/FF3.5. But since the standard isn't yet approved, it might be premature for someone to attempt such an app. </div></BLOCKQUOTE><BR><BR>I'm not sure either about this - but I agree it looks very close to what Core Animation does.<BR><BR>As far as the Motion Tool goes - as stated by D. Bradbury - 2 different technologies. That's up there with asking Autodesk to rewrite 3D Studio max and Maya to render their respective content out as HTML - Javascript and CSS using flat imagge files. The Image Squence of files is already possible and both Apps are scriptable - but just thinking about scripting that as a 3rd party gives me a headache.<BR><BR>The point is that Apple would probably have to rebuild the App Engine to handle this for Motion. Besides Motion has nothing to do with the web industry. Youd need to think 3D Animation - "The Incredibles" or tv commercials. Applying Motion to the upcoming HTML 5/ CSS 3 is like comparing Goats to Pumpkins.<BR><BR>===============================<BR><BR><BR><BLOCKQUOTE class="ip-ubbcode-quote"><div class="ip-ubbcode-quote-title">quote:</div><div class="ip-ubbcode-quote-content">Originally posted by fjpoblam:<BR>That 3D Image Fly is utterly amazing. I've been perusing [or should I say, poring over] "All you ever needed to know about CSS3" ... http://www.css3.info/ ...and seen no hint. Guess I need to start again. </div></BLOCKQUOTE><BR>As the Article stated - Apple has submitted this to the Standards committees. The problem is that Mozilla and Google have not implemented this stuff into their Browsers and it won't work in FF or Chrome. Just the same as the implementations of HTML 5 and CSS 3 for Chrome and FF don't seem to work in other Browsers that have minor support for HTML 5/ CSS 3 components.<BR><BR>Since neither are Standards right now - all 3 companies are vying for the various features that they've added. FF for example posted an HTML Video clip in OGG video format that is not supported by Safari - so it breaks. Just the same F 3.5 does not render the Safari 4 Welcome Page (this article mentions).<BR><BR>So until someone say "here is the list of standards to comply with" none of the Browser makers are going to play nice with each other and in the interim we have a minor browser war going on. So as always a site developer has to code several times to implement anything or throw up disclaimers saying that all of the site or portions are best viewed by this or that browser.

 

[fferitt25]

Folks asking about having this stuff show up in other browsers and platforms - keep in mind this is a Beta Dev Build where this works.<BR><BR>It does not work in any current stable final releases of any browsers at all as of this post.<BR><BR>Also - HTML 5 and CSS 3 are only recommendations at this point. Nothing has been finalized in the code standards and therefore no official Specs. Nothing is expected to be finalized until 2012 at the earliest - there's an article here at Ars or ever at Engadget about the timeframes of the standards being ratified. Or go browse the W3c for more info.<BR><BR>For example without the W3C outing standards for CSS v2.x none of us would be able to open any browser we choose and surf to a page rendered with an AJAX implementation. If that were the case - no standards ratified - Apple would have some webkit-based Tags showing off part of what it's browser was capable of - while Mozilla would be doing the same with their fun little -Moz Tags for other parts of the the recommendation. And neither would work on the others browser.<BR><BR>Does This Sound Familiar?<BR><BR>All that Apple and Mozilla are showing off right now is that both of current versions of their browser are capable of using the new and upcoming - yet to be released standards. That's all. It's like Pontiac showing off the 2012 Firebird Model 2.5 years early. And when something becomes standardized that both companies can quick modify their browsers to handle the Specs.<BR><BR>In between all of this website builders are probably going to be implementing numerous "hacks" to make their own special effects work across browsers - looking the same way to the user/ viewer - but behind the scenes working very differently to accomplish the same thing.<BR><BR>That's too much damned work - unless someone is paying big bucks. I for one will probably mess around with some of this - but will do like the Samples from the article did - Test Pages of what is possible. Then add a description and a disclaimer.

 

[Invid]

<BLOCKQUOTE class="ip-ubbcode-quote"><div class="ip-ubbcode-quote-title">quote:</div><div class="ip-ubbcode-quote-content">Originally posted by fferitt25:<BR>Folks asking about having this stuff show up in other browsers and platforms - keep in mind this is a Beta Dev Build where this works.<BR><BR>It does not work in any current stable final releases of any browsers at all as of this post. </div></BLOCKQUOTE><BR><BR>These examples render fine in the latest mobile safari on the iPhone / iPod Touch. Surprisingly good performance too.<BR><BR>That said, I can't see them in widespread use for a while as I doubt that any other webkit based browsers will render them correctly, particularly the mobile varieties.

 

[OoklaTheMok]

Hum. Performance is quite choppy on both my iPhone and my 2.4GHz (667 MHz memory) iMac. The iMac fares better but not super impressively.

 

[foresmac108]

<BLOCKQUOTE class="ip-ubbcode-quote"><div class="ip-ubbcode-quote-title">quote:</div><div class="ip-ubbcode-quote-content">Originally posted by fferitt25:<BR>It does not work in any current stable final releases of any browsers at all as of this post. </div></BLOCKQUOTE>To be fair, the shipping versions of MobileSafari on iPhone OS 2.x and 3.x support Apple's implementation of the standard as it is currently defined.

 

[Pete Zich]

<BLOCKQUOTE class="ip-ubbcode-quote"><div class="ip-ubbcode-quote-title">quote:</div><div class="ip-ubbcode-quote-content">Originally posted by Michael Kingery:<BR>so nobody has heard of or used "cooliris"?<BR><BR>http://www.cooliris.com/<BR><BR>it will change your life if you look for stock or reference photos at work. </div></BLOCKQUOTE><BR><BR>I have seen Cooliris, which is quite impressive. The difference here is that this is done in a web browser without the use of Flash.

 

[kaleberg]

This sounds totally annoying. Basically, it's <BLINKING> for the new century. I frequently use the internet to read text, look at pictures, play movies and listen to music. I don't remember ever wanting to look at flying rectangles. <BR><BR>Is the blocking software available yet?<BR><BR>I suppose it might make VRML like explorations, such as Google Street View, a bit more effective, but building virtual worlds is hard work. If Apple wants this used, they'll need to add a "memory palace" option to iPhoto and iWeb. Otherwise, this "feature" will just be ad-junk, and, like most Flash, people will just turn it off.