CSS Perspective Not Working in Firefox

CSS perspective not working in Firefox

You are seeing Bug 716524 - 'perspective' only affects child nodes, not further descendants. The defect describes that there is a difference between Chrome and Firefox in their interpretation of what inherited means. It looks like it should not be inherited, according to perspective MDN documentation but I sort of agree with Chrome as it feels intuitive to propagate it to descendants.

I tried the workaround from 3D transformations with Firefox 10+ which recommends reapplying transform-style: preserve-3d (with or without the -moz- depending on which versions of Firefox you care about supporting) at each depth but that still wasn't working for me.

Moving perspective and perspective-origin to the <ul> fixes the problem in Firefox.

perspective not working on FireFox

If nothing seems to work you can try a workaround for firefox as follows:

@-moz-document url-prefix() {
    .uic-wrapper:hover .card-middle {
        transform: translate3d(14px, -12px, -30px);
        opacity: .8;
        width: 90%;
    }

    .uic-wrapper:hover .card-back {
        transform: translate3d(28px, -24px, -120px);
        opacity: .4;
        width: 80%;
    }
}

We are manually setting the X and Y coordinate for transform and also setting some width to match how it should actually look.

Here's a working fiddle https://jsfiddle.net/85a1gxbL/15/

Perspective property (css3) not working on Mozilla Firefox browser

You need to specify the unit of your perspective [px,em,pt,etc].

In your code, it should be:

transform: perspective(300px) rotateY(20deg); 

Instead of:

transform: perspective(300) rotateY(20deg);   

The number without a unit is meaningless and invalid according to the w3 docs, unless the value is 0. (You can also refer to this SO answer

On another note, you should also have a non-prefixed @keyframes, as most newer browsers support it.

CSS perspective bug under firefox

Looks like Firefox isn't playing nicely with setting a zero-value for the transform: perspective(n) rule. What worked for me is just removing the perspective transform from the .active rule:

#owl-demo .owl-item.active > div{
  background: #6699ff;
  -moz-transform: rotateX(15deg) scaleY(1);
  -o-transform: rotateX(15deg) scaleY(1);
  -ms-transform: rotateX(15deg) scaleY(1);
  -webkit-transform: rotateX(15deg) scaleY(1);
  transform: rotateX(15deg) scaleY(1);
}

Jump the the Edit section, the scenario below is incorrect, but still using it as a reference later

Additionally, I've found that the standalone perspective property does work fine with zero values. If ensuring that value is set to zero is important to you, perhaps this will suffice:

#owl-demo .owl-item.active > div{
  background: #6699ff;
  -moz-transform: rotateX(15deg) scaleY(1);
  -moz-perspective: 0em;
  -o-transform: rotateX(15deg) scaleY(1);
  -ms-transform: rotateX(15deg) scaleY(1);
  -webkit-transform: rotateX(15deg) scaleY(1);
  transform: rotateX(15deg) scaleY(1);
  perspective: 0em;
}

Edit

Turns out the second scenario is only "working" because it wasn't being used correctly. For reference, perspective is a property intended to provide a 3D space to apply perspective to all 3D transformed child elements. For example:

.owl-item {
  perspective: 2em;
}
#owl-demo .owl-item > div {
  margin: 0px 2px;
  height:100px;
  background: #6699ff;
  -moz-transform: rotateX(15deg) scaleY(1);
  -o-transform: rotateX(15deg) scaleY(1);
  -ms-transform: rotateX(15deg) scaleY(1);
  -webkit-transform: rotateX(15deg) scaleY(1);
  transform: rotateX(15deg) scaleY(1);
}

Because the child divs of the owl-item containers all have 3D transforms applied to them, this will apply a perspective to each of them. However, this makes removing the perspective from a single child (the active div) impossible, at least with pure CSS.

transform: perspective(n), on the other hand, affects each of the child elements individually, so the perspective can be removed by applying the active class:

#owl-demo .owl-item > div {
  margin: 0px 2px;
  height:100px;
  background: #cccccc;
  -moz-transform: perspective(2em) rotateX(15deg) scaleY(1);
  -o-transform: perspective(2em) rotateX(15deg) scaleY(1);
  -ms-transform: perspective(2em) rotateX(15deg) scaleY(1);
  -webkit-transform: perspective(2em) rotateX(15deg) scaleY(1);
  transform: perspective(2em) rotateX(15deg) scaleY(1);
  transition: transform .5s;
}
#owl-demo .owl-item.active > div{
  background: #6699ff;
  -moz-transform: rotateX(15deg) scaleY(1);
  -o-transform: rotateX(15deg) scaleY(1);
  -ms-transform: rotateX(15deg) scaleY(1);
  -webkit-transform: rotateX(15deg) scaleY(1);
  transform: rotateX(15deg) scaleY(1);
}

Hopefully this helps with the understanding of the 2 perspective approaches. I know it helped me :)

CSS perspective not working in Internet Explorer 10 or Firefox

Unit of length

IE and Firefox require a unit of length on perspective values (px, em).

   -moz-perspective: 800px;
        perspective: 800px;

For Chrome and Safari, the unit of length is optional when using the -webkit prefix.

-webkit-perspective: 800;    /* This works with or without the px unit */

W3C standards

It's safer to add a unit of length to all perspective values. It's more consistent with the W3C standard. It's the one approach that all browsers support. And once Chrome and Safari start supporting perspective without a prefix, it's possible that they'll require a unit of length (for consistency with W3C standards and with other browsers).

-webkit-perspective: 800px;
   -moz-perspective: 800px;
        perspective: 800px;

Note: The current info on w3schools.com is outdated. There's no mention of support for IE10 or Firefox, and their examples do not have a unit of length. The more-recent examples on developer.mozilla.org include a unit of length, consistent with the W3C standards.

Why CSS3 perspective is not working in firefox

you forgot px after perspective value!!

like this:

  -webkit-perspective:600px;
  -moz-perspective:600px;
  perspective:600px;

---

Related Topics