Try those examples on Chrome or Android (or probably anything else, but the CSS attributes are all -webkit prefixed so comparing against FF would be silly).
Chrome is just now rolling out GPU acceleration so they might actually work on some platforms but previously they (meaning Chrome and Android) were using a rendering engine called Skia and were dropping out a bunch of the perspective matrix therefore making it strictly affine and preventing any true depth effects.
I'll bite: The problem with the implementation is plain to see:
-webkit-transform: rotateY(45deg);
That's a proprietary CSS declaration. It's exactly the same kind of "embrace and extend" kind of stuff that entrenched IE6 so long ago and severly splintered web development. Why, oh why, do I have to prefix -moz- or -webkit- onto CSS instructions in a "standards compliant" world?
Web dev is getting badly fractured again. There was a point of stability about two years ago where all of the IE quirks were knowns and the rest of the browsers followed CSS2/HTML4 fairly consistently. There was a blissful period where you knew something might be borked in IE6, but could almost just assume things would render in most other browsers.
Such a time has now ended. I find myself saying "but that should have worked?!?!" at about the same rate I did when IE6 was new 10 years ago. Sadly now I have to have $$ to spend on testing hardware rather than just firing up an old piece of software.
TL;DR, 3D transform in webkit isn't true CSS3... it's a proprietary webkit feature.
Yes, but 3D transform is still a proprietary webkit feature, which was badmonkey0001's point.
The fact that they wrote up half-assed incomplete documentation of it and submitted it to the W3C for consideration as a standard doesn't change that. It's actually more or less like OOXML except it hasn't had the feedback-and-rubberstamp process happen yet. With any luck, that process won't happen, in fact (in that there will be actual discussion and actual specification, not rubberstamping).
Now if the CSS working group actually starts actively working on 3D transforms (hasn't happened yet) and anyone other than Webkit actually implements them, then we can talk about them being something other than what they are now.
There _is_ a bit of confusion here because vendor prefixes are used for both experimental implementations of CSS working group proposals and totally random proprietary gunk. The problem is telling the two apart... ;)
Thank you for being the one person here that seems to consider point of view without the fanboy-ism. What people are calling "HTML5" and "CSS3" is really getting nebulous. It's almost as if just mentioning something shiny and new somehow makes it part of the spec.
I do think prefixes are better than hacks, but to call a prefixed single-browser feature "CSS3" or "HTML5" kind of blows my mind... no matter how unpopular that view may be here on HN.
"The word heretic ought to be a term of honour..." -Charles Bradlaugh
Browsers sometimes charge ahead. I woul them rather to do that with prefixes than without. I don't think that's in any way comparable to Microsoft's behavior.
Charging ahead with prefixes is sure better than without.
Doing that and encouraging web authors to create public-facing sites that depend on the prefixes to work correctly (which is what Apple has been doing) is no different from Microsoft's behavior around 2001, imo.
Well, Apple is doing all kinds of weird stuff and Apple is also not Webkit.
I think that 3D transforms in CSS are inevitable, there is consequently nothing wrong with browsers testing the waters. Implementation and standards always had an organic relationship, sometimes the standards are ahead and sometimes the implementations. I think that’s how it should work, I think that strengthens and accelerates the process. The standards frontier of the web will always be messy and I am honestly happy that standards bodies are finally willing to embrace that messiness.
Apple encouraging the use of CSS properties with prefixes, even if they are brand new and there are no implementations in other browsers or even plans is a different issue. Luckily nobody listens to Apple when looking for advice regarding web development ;-)
I personally think that you shouldn’t use 3D transforms at the moment for anything you intend to be used. Neat demos are ok.
Try those examples on Chrome or Android (or probably anything else, but the CSS attributes are all -webkit prefixed so comparing against FF would be silly).
Chrome is just now rolling out GPU acceleration so they might actually work on some platforms but previously they (meaning Chrome and Android) were using a rendering engine called Skia and were dropping out a bunch of the perspective matrix therefore making it strictly affine and preventing any true depth effects.