CSS透视在Firefox中不工作 [英] CSS perspective not working in Firefox

问题描述

这可能是任何人曾经问过的最简单的问题，但我的头脑今天早上画一个空白。也许我需要更多的咖啡。

This is probably the simplest question anyone has ever asked on SO but my mind is drawing a blank this morning. Maybe I need more coffee.

基本上我想添加一些CSS3变换效果到一个元素，无论什么原因，Firefox不玩球。

Basically I'm trying to add some CSS3 transform effects to an element and for whatever reason Firefox isn't playing ball.

如果您在Chrome中查看这个小提示，看看我想要什么，然后如果你看看它在Firefox中，你会看到它不一样...

If you take a look at this fiddle in Chrome you'll see what I want, then if you look at it in Firefox you'll see that it's not the same...

这是特定元素的CSS; / p>

This is the CSS for that particular element;

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

我只是缺少一个属性或什么？

Am I just missing a property or something?

推荐答案

您正在查看 Bug 716524 - 透视只影响子节点，不再进一步的后代。该缺陷描述了Chrome和Firefox在解释继承的 意义之间的区别。根据 透视图，它似乎不应继承$ c> MDN文档，但我同意Chrome，因为它感觉直觉传播给后代。

You are seeing Bug 716524 - 'perspective' only affects child nodes, not further descendants. The defect describes that there is a difference between Chrome and Firefox in their interpretation of what inherited means. It looks like it should not be inherited, according to perspective MDN documentation but I sort of agree with Chrome as it feels intuitive to propagate it to descendants.

我尝试了解决方法从3D转换与Firefox 10+ ，其中建议重新应用 transform-style：preserve-3d （有或没有 -moz - 取决于您关心的Firefox版本支持）

I tried the workaround from 3D transformations with Firefox 10+ which recommends reapplying transform-style: preserve-3d (with or without the -moz- depending on which versions of Firefox you care about supporting) at each depth but that still wasn't working for me.

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

Moving perspective and perspective-origin to the <ul> fixes the problem in Firefox.

这篇关于CSS透视在Firefox中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！