Grow your CSS skills. Land your dream job.

3-D Transforms

  • GMB
    # September 9, 2012 at 3:31 pm

    I’ve recently redone my personal website using Hakim El Hattab’s Meny, but for some reason the 3-D transform is not working in Firefox. Currently all pages get a fallback design for browsers that don’t support 3-D transform effects, though Firefox does. The Meny demo does transform properly in Firefox, so it must be something that I’ve done in revising the CSS for my site, only I can’t figure out what it was. Does anyone have any ideas?

    It’s not a disaster as the fallback design is also quite nice, I’d just like to better understand what’s happening here and get it to function properly, if possible.

    Thanks in advance for any explanations/suggestions.

    # September 9, 2012 at 4:20 pm

    Hi Guy!

    It looks like the difference between the demo and the meny.css file is in the .meny-wrapper. Add a “px” to the end of each perspective definition and it should start working.

    .meny-wrapper {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -ms-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;

    GMB
    # September 9, 2012 at 6:28 pm

    That did the trick! Many thanks.

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

You must be logged in to reply to this topic.

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