CSS透视不适用于Firefox

Question

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

基本上我正在尝试将一些CSS3变换效果添加到元素中,无论出于何种原因,Firefox都不会玩球.

如果你看看Chrome 中这个小提琴,你会看到我想要的东西,然后如果你在Firefox中看到它,你会发现它不一样......

这是该特定元素的CSS;

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

我只是错过了一处房产吗？

Answer 1

你看到Bug 716524 - 'perspective'只影响子节点,而不影响其他后代.该缺陷描述了Chrome和Firefox在解释继承方式方面存在差异.根据perspectiveMDN文档,看起来它不应该被继承,但我有点同意Chrome,因为将它传播给后代是很直观的.

我尝试使用Firefox 10+进行3D转换的解决方法,建议在每个深度重新应用transform-style: preserve-3d(有或没有-moz-取决于你关心支持哪些版本的Firefox),但这仍然不适合我.

移动perspective和perspective-origin对<ul>在Firefox修复的问题.

Answer 2

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

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

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