An Introduction to CSS 3-D Transforms

27 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Kenneth Nordahl

    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.

  2. David DeSandro

    @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

  3. Paul Hayes

    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)

  4. Mazilu Teodor

    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!

  5. Mathias

    @Jakub:

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

    You didn’t read the article, did you…

  6. Dirk Weber

    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 :(

  7. Kevin Haggerty

    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.

  8. David DeSandro

    @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.

  9. Henk

    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.

  10. Aaron T. Grogg

    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

  11. Malte Ubl

    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

  12. Matthew Farag

    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.

  13. Andreas

    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.

  14. Alex

    I fail to see why this article bears any great current relevancy. Whilst the future of User Interfaces may lie in 3D transforms – unfortunately not many of my friends (after all this is 24 ways to impress your friends) have Safari (either iOS or desktop).

    Its one thing to have an article that expressly covers something that isn’t available in one browser, but to have an article covering a topic that is currently only available to one browser, seems to me to be a waste of time.

    Don’t get me wrong – I have every intention to use 3D transforms – I just think the article is a touch premature in it’s timing.

  15. benjamin

    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

  16. Rich

    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!

  17. David DeSandro

    @Malte
    You might be thinking of how GPU acceleration is triggered in Chromium. I haven’t had a chance to verify this. Yes, I am sure about the Safari hardware acceleration.

    @Alex
    This is a valid concern. I happen to side with Andy Clarke, who fervently advocates designing for the best features out there. He wrote a whole book about it. But just in the last couple months I’ve seen more examples of 3D transforms popping up. So I know as a collective, we web designers are certainly ready to start using them – because people are already doing so.

    But our early steps have been a bit misguided. all the of 3D object (mostly cube) demos, not one of them resolve the pixelation issue. In Mr. Clarke’s published book, his card-flipping demos suffer from the multiple-vanishing-point issue I discuss in this article. I felt like now was a great time to jump in and try to explore these issues while the subject is still fresh.

    @Benjamin
    Ooooooo, this is neat. If I understand you correctly, the carousel should rotate around the viewer, and not around a point behind the visible cell. For issues like this, I always start sketching so I can better understand what I’m going for. Take a look

    In the Carousel 1 example we would reverse how we’re applying @transformZ@ values. Each panel would be pulled in in 3D space, @transformZ( -288px )@ and the carousel would be pulled back @transformZ( 288px )@ The tricky part is figuring out how many cells you’ll need to so that the center point of the carousel is behind the viewer. Best of luck!

    The tricky part is figuring out where the viewer is in 3D space.

Impress us

Be friendly / use Textile