Get a free trial // Grow your CSS skills // Land your dream job

3d transform not working google chrome

  • # January 7, 2013 at 12:38 am

    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" "">

    Untitled Document

    # January 7, 2013 at 1:01 am

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

    # January 7, 2013 at 5:19 pm

    Funny the 3D transform stopped working on [my site]( 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.

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

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

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

    # January 7, 2013 at 11:40 pm

    Just noticed that Hakim’s [Meny demo]( is not 3D transforming either in Chrome.


    # January 8, 2013 at 12:04 am

    @GMB It’s definitely on your end because it works for me:

    # 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`

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

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed