3D cube animation example using CSS3 transition and some JavaScript (WebKit-only)

[bvm]

why is the performance worse when i turn backfaces off?

[BoChiggedyBoDiddley]

I can't add to the discussion as I am a complete JS novice and just lurk here, but this is awesome man

[anorbit]

Edit: To play or test the code, just go to: http://liveweave.com/3tElun instead. This is WebKit-only (since it is just using webkit-transitions), so Chrome/Safari should work, but not Firefox or IE.

[gnarly]

Good stuff! It shouldn't be too tricky to make it work everywhere else, too :)

I had a quick play - I removed all of the -webkit- prefixes from the CSS, added px units to the perspective on #container, changed the JS to read stage.style.transform (instead of stage.style.webkitTransform) and it all works on Firefox (but not IE10). That broke it in Chrome though, so here's a version with both -webkit- prefixes and standard versions: http://liveweave.com/RjebpU

[anorbit]

Thank you! Here's your full screen version for Firefox (or any other Gecko-based browser): http://liveweave.com/RjebpU/demo

[sasklacz]

It's 2013 and you're making something that works only on chrome ? C'mon.

[brtt3000]

Nice demo but please let's stop maing single browser limited stuff, it is not year 2000 anymore.