Menu
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?
231
The perspective() CSS function defines a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimensional. Its result is a <transform-function> data type.
The perspective CSS property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.
This is the main difference between the transform: perspective() function and the perspective property. The first gives element depth while the later creates a 3D-space shared by all its transformed children.
The perspective-origin CSS property determines the position at which the viewer is looking. It is used as the vanishing point by the perspective property.
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.
171
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
