CSS 透视图在 Firefox 中不起作用

Posted 2023-03-06

【中文标题】CSS 透视图在 Firefox 中不起作用

【英文标题】：CSS perspective not working in Firefox

【发布时间】：2014-05-29 14:16:19

【问题描述】：

这可能是任何人在 SO 上问过的最简单的问题，但今天早上我的大脑一片空白。也许我需要更多的咖啡。

基本上，我正在尝试向元素添加一些 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 我最初有一个 -moz 前缀，但它没有任何区别，所以我删除了它。我也刚刚在我的小提琴中尝试过它仍然无法正常工作。

【参考方案1】：

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

我尝试了3D transformations with Firefox 10+ 的解决方法，它建议在每个深度重新应用transform-style: preserve-3d（有或没有-moz-，具体取决于您关心支持的Firefox 版本），但这仍然不适合我。

将perspective 和perspective-origin 移动到<ul> 可以解决Firefox 中的问题。

【讨论】：

完美！！非常感谢

【参考方案2】：

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

注意：您必须在设置了perspective 的元素上设置transform-style: preserve-3d; 才能使用。

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

【参考方案3】：

在 mozilla firbox 中透视属性可能仍然不起作用。 所以你可以添加这个命令： -moz-perspective：（用 10rem 等测量单位写下你的值） 透视属性适用于所有其他浏览器，因此仅使用 firbox obove 命令。 谢谢?