Grow your CSS skills. Land your dream job.

3d transform not working google chrome

  • # January 7, 2013 at 12:38 am

    hi,
    i just want to know that why 3d transform is not working on google chrome, same code working in firefox properly.
    plz help.

    source code

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





    # January 7, 2013 at 1:01 am

    Try using the webkit prefix. `-webkit-transform`.

    GMB
    # January 7, 2013 at 5:19 pm

    Funny the 3D transform stopped working on [my site](http://www.guybennett.com) with Chrome as well (still works in FF and Safari), and I am using the webkit prefix (with “transition” not “transform” — could that be the issue?).

    # January 7, 2013 at 5:31 pm

    @GMB Yep. You need the -webkit- prefix. http://caniuse.com/#search=transform

    Your site transform works for me. Pretty cool, by the way.

    GMB
    # January 7, 2013 at 5:34 pm

    I am using the webkit prefix and the 3D transform used to work with Chrome. At one point that changed (though the code hadn’t). I don’t know why.

    GMB
    # January 7, 2013 at 11:03 pm

    @chrisburton — I’d love to take credit for the effect, but it’s a very lightly retinkered version of Hakim El Hattab’s Meny.

    I’m puzzled though — the 3D transform is *not* working for me with Chrome. Don’t understand why.

    # January 7, 2013 at 11:07 pm

    @GMB Hey, sorry. It’s probably best if you create a reduced test case on CodePen. This way we can eliminate the issue.

    GMB
    # January 7, 2013 at 11:40 pm

    Just noticed that Hakim’s [Meny demo](http://lab.hakim.se/meny/) is not 3D transforming either in Chrome.

    Hmm…

    # January 8, 2013 at 12:04 am

    @GMB It’s definitely on your end because it works for me: http://cloud.chrisburton.me/M0GQ

    GMB
    # January 8, 2013 at 12:31 am

    @chrisburton — I’ve been trying to think of what it could be but have come up blank. I’ve check my settings — they look normal. JS is definitely enabled.

    Any idea what might cause this? If not perhaps I’ll reinstall Chrome and see if that works.

    # January 8, 2013 at 12:39 am

    @GMB It might be the settings which you could have overlooked. No idea, to be honest.

    Type this into Chrome and check: `about:flags`

    GMB
    # January 10, 2013 at 11:28 am

    @chrisburton — Thanks for pointing me to about:flags, which I was unaware of. Even with that however I was unable to figure out what was wrong and so wound up reinstalling Chrome — the 3D transforms work as they should now. I appreciate your help.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".