CSS透视在Firefox中不起作用。

Question

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

基本上，我正在尝试将一些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);

我是不是缺少某个属性或其他东西？

- Dean Elliott

---

你需要为 Firefox 添加 -moz 前缀。 - Vucko

@Vucko 我最初使用了“-moz”前缀，但没有任何影响，所以我将其删除了。我刚刚在我的fiddle中尝试了一下，它仍然无法正常工作。 - Dean Elliott

Answer 1

您正在查看 Bug 716524 -“透视”仅影响子节点，而不影响更深的后代。该缺陷描述了 Chrome 和 Firefox 在对继承的理解上存在差异。根据perspective MDN文档，它似乎不应该被继承，但我有点同意 Chrome 的做法，因为将其传播到后代感觉很直观。

我尝试了来自Firefox 10+中的3D变换的解决方法，它建议在每个深度重新应用 transform-style: preserve-3d（取决于您关心支持哪些版本的 Firefox，可以带或不带 -moz-），但这对我仍然没有起作用。

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

- andyb

---

完美！非常感谢。 - Dean Elliott

Answer 2

可能的解决方法: 如果有人遇到同样的问题... 我刚刚发现在Firefox中，您可以在具有perspective设置的元素和正在转换的元素之间的所有元素中添加transform-style: inherit;，然后应该能够看到您的转换效果。

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

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

- Resist Design

Answer 3

在Mozilla Firefox浏览器中，透视属性可能仍然无法正常工作。 因此，您可以添加以下命令： -moz-perspective：（使用度量单位，如10rem等）（填写您的值） 透视属性适用于其他所有浏览器，仅对Firefox浏览器使用上述命令。 谢谢。

- Sanaan Ashfaq