CSS视角在火狐浏览器中不起作用

这可能是任何人曾经问过的最简单的问题，但我的想法今天早上正在画空白。也许我需要更多的咖啡。CSS视角在火狐浏览器中不起作用

基本上我试图给一个元素添加一些CSS3转换效果，无论出于何种原因，Firefox不是在玩球。

如果您在Chrome看看this fiddle你会看到我想要的，那么如果你在Firefox中看到它，你会看到，它是不一样的......

这是CSS该特定元素;

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

我只是缺少一个属性或东西吗？

您需要为firefox添加'-moz'前缀。 – Vucko

@Vucko我最初有一个'-moz'前缀，但没有区别，所以我删除了它。我刚刚在我的小提琴中尝试过它，但它仍然不起作用。 –

您正在查看的Bug 716524 - 'perspective' only affects child nodes, not further descendants。该缺陷描述了Chrome和Firefox在解释继承的含义时的区别。它看起来不应该被继承，根据perspective MDN文档，但我有点赞同Chrome浏览器，因为感觉直观地传播给后代。

我试图解决方法从3D transformations with Firefox 10+其中建议重新申请transform-style: preserve-3d（带或不带-moz-取决于你所关心支持其火狐版本），在每个深度，但仍然没有为我工作。

移动perspective和perspective-origin到<ul>修复了Firefox中的问题。

2014-04-15 11:43:34 andyb

完美！非常感谢 –

可能的解决方法：在此情况下，任何人都可以帮助...我发现在Firefox中，你可以用perspective集和元素被转换添加transform-style: inherit;的元素之间的所有元素，你应该看到您的转换。

注意：您必须设置transform-style: preserve-3d;与perspective设置此元素的工作。

这是有点不好意思，但直到他们改变实施，这似乎是我能找到做到这一点的唯一途径。

2015-06-16 03:43:16

回答