CSS perspective not working in Firefox

Question

This is probably the simplest question anyone has ever asked on SO but my mind is drawing a blank this morning. Maybe I need more coffee.

Basically I'm trying to add some CSS3 transform effects to an element and for whatever reason Firefox isn't playing ball.

If you take a look at this fiddle in Chrome you'll see what I want, then if you look at it in Firefox you'll see that it's not the same...

This is the CSS for that particular element;

-webkit-transform: rotateY(60deg) scale(0.9);
-ms-transform: rotateY(60deg) scale(0.9);
transform: rotateY(60deg) scale(0.9);

Am I just missing a property or something?

Answer 1

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.

Answer 2

POSSIBLE WORKAROUND: In case this helps anyone... I just found that in Firefox you can add transform-style: inherit; to all elements between the element with perspective set and the element being transformed and you should see your transform.

NOTE: You must set transform-style: preserve-3d; on the element with perspective set for this to work.

This is a bit hacky but until they change the implementation this seems to be the only way I could find to do it.