I added some “flipping cards” to my recent portfolio redesign. Can’t wait for cross browser support. My current solution is to hide the “backface images” in other browsers than the webkit based ones.

Incredible article about an incredible topic. Great read.

At the end of the article you pointed out two interesting things. To which I’d like to add the following: why bother doing the transforms in CSS in the first place? We can rely on the good ol’ JavaScript and HTML5 elements, namely <canvas> and <svg>. This way, the computer will do the computational work for us – not to mention that the current support for HTML5 in browsers is better than for CSS 3D transforms!

Now THAT is how you impress your friends! I can’t believe how smooth and crisp the animations are, looks better than a lot of javascript animations.

Insane article.
Thanks David!

@Mazilu – Excellent question. Canvas/SVG 3D stuff is ideal if you’re creating complex 3D environments. I wouldn’t recommend trying to re-create some of Mr. Doob’s three.js demos with CSS.

CSS 3D transforms have the following advantages over 3D canvas implementations:

* Can be used on any element on the page. Canvas 3D requires that the visuals live inside a single element
* Hardware accelerated on iOS devices
* More graceful degradation

Hey,

truly awesome article. Are you sure about only the shorthard version triggering GPU acceleration? That was probably a misunderstanding. All transforms that trigger 3d operations should trigger GPU rendering.

Cheers
Malte

Really good article – you’ve got a real knack for making something that is complex sound simple and straight forward.

I’d not considered pushing the cube back so the front face is at page level, rather than in front before – genius idea!

I’d made this a while ago: 3d cube carousel , it would really benefit from that approach, think I’ll have to go back and fix!

Just to chime in with my thoughts and experiments. This is an excellent article and introduction to 3D CSS transforms.

I’ve done a lot of work with this stuff over the past year, include a cube hooked up to iOS touch gestures/click and drag: http://www.paulrhayes.com/2010-09/3d-css-cube-ii-touch-gestures-click-and-drag/ and a tetrahedron using Tantek’s CSS triangles approach: http://www.paulrhayes.com/2010-10/css-tetrahedron/

I’ve also been testing out some of the rendering constraints using this experiment: http://www.paulrhayes.com/experiments/gibson/index.html (warning, this one is more intense)

Good overview, 3d transforms in CSS are the wave of the future. Must be used responsibly!

Here’s some 3d transforms in action on my portfolio site, with added scale transforms to zoom in on the action whenever the user plays a video:

http://splatcollision.com

Also, in my experimentation, there’s a neat trick to getting 2d elements (such as interface panels) overlaid on 3d space (such as a layout/animation editor) – crucial for tool-building.

Set your 2d elements to have “-webkit-perspective: 0” and “-webkit-transform: translate3d(0,0,10000px)” ( or any big enough z-value) This will render those 2d elements as 3d but with flat perspective.

awesome article, kudos!

@Jakub:

Nice, I’m finally going to experiment with <canvas>. Thanks for the detailed introduction!

You didn’t read the article, did you…

Carousel 2 demo is just awesome on my macbook, perfectly smooth. I can’t wait to see these new opportunities supported on all major browsers.

Super sweet and inspiring article!

Nice examples. CSS3 rocks!

Hi David, great article! Anyway I have some additions: maybe our windows-friends should know that Chromium and Safari for Windows already do support CSS3 3D.

And feature detection for CSS3 3D is bitchy. Unfortunately Webkit will always tell us that CSS3 3D is supported, which makes modernizr rather useless for detecting CSS3 3D in Webkit, regardless which version is used :(

@Paul I’ve added a bunch of your experiments to a list of 3D CSS examples You’re free to edit this list as you see fit.

@Dirk – thanks for clearing up the current Windows support situation. Re: Modernizr, I know that version 1.6 does return as negative in Chrome (can’t speak for Chromium builds), this wasn’t the case in earlier builds. If its still producing false positives, you should submit an issue So Paul & Faruk can resolve it.

Thanks so much for chiming in as I was unaware of all the spectacular development you’ve made on 3D CSS transforms. I’ve added a bunch of articles and examples to the links in the github wiki.

This article is still in development as a GitHub repo . I welcome any pull requests, suggestions, and additions.

I admit that 3D gives something more than the ordinary 2D you see everywhere.
My problem always was that if I wanted to make 3D figures I didn’t think of using css and made an 3D image.
This 3D image loads slower and the new google and visitors don’t like slow loading pages.

Thanks David for giving the tip of using CSS for my 3D images. This makes it problem of loading slower go away.

Hey David, one of the better intros I’ve seen, so many other articles just run through all the “pieces”, but you actually introduce in an order that should make it more easily understandable to newbies.

One note that might be helpful for any card-flippers out there: -webkit-backface-visibility: hidden; does not yet work in Chrome, even though it does work in Chrome’s WebKit-cousin, Safari…

To get around this, I placed the card back at 90deg, 0-opacity, then applied a delay on the back transition so that the front would start to flip, and when it got half-way, I started the back transition. It worked really well.

Thanks again,
Atg

I’m deeply impressed by your really great article here, thank you !

You can also achieve some cool effects by transforming a child element whilst transforming the parent.

I did a 3D rotation on the parent whilst Z-translating child elements and achieved a cool multi-dimensional effect on my… (wait for it!)… portfolio.

Very good article. Have a look at X3DOM (http://x3dom.org). It aims to make the 3D stuff easier. It’s a early stages research project trying to bring X3D (VRML) into HTML5. Kind of like SVG for 3D.

hi, nice blog !

I’m currently developping a 3D carousel just like yours! but my spec is to have the div’s content (i use div and not figure) “inside” the “ring” and not “outside”. i tried to apply a rotateX(180deg) on the div, but the render is bad. i think there are a problem with the backface visibility!

first : did you understand what i meant ? ;-) (bad english)
second : do you have a solution ?

thanks

Just tried the card flip experiments on my iTouch and my Droid. The iTouch worked perfectly, the Droid was funny. :-p

Wow, a really great article!

It explains a few questions I had back in April when I
built a 3-D-bookshelf.