CSS透视不适用于Firefox

时间:2014-04-15 09:46:33

标签: css css3 google-chrome firefox css-transforms

这可能是任何人曾经问过的最简单的问题,但我的思绪今天早上一片空白。也许我需要更多的咖啡。

基本上我试图为一个元素添加一些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);

我只是错过了某处房产吗?

2 个答案:

答案 0 :(得分:8)

您正在看Bug 716524 - 'perspective' only affects child nodes, not further descendants。该缺陷描述了Chrome和Firefox在解释继承的含义方面存在差异。根据{{​​3}} MDN文档,看起来它不应该被继承,但我有点同意Chrome,因为将它传播给后代是很直观的。

我尝试了perspective的解决方法,建议在每个深度重新应用transform-style: preserve-3d(有或没有-moz-,具体取决于您关心支持的Firefox版本),但仍然没有为我工作。

perspectiveperspective-origin移至<ul>可修复Firefox中的问题。

答案 1 :(得分:8)

可能的解决方法:如果这有助于任何人...我刚刚发现在Firefox中您可以将transform-style: inherit;添加到设置了perspective的元素之间的所有元素元素被转换,你应该看到你的转变。

注意:您必须在设置为transform-style: preserve-3d;的元素上设置perspective才能生效。

这有点hacky但是在他们改变实现之前,这似乎是我能找到的唯一方法。