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 - 'perspective '仅影响子节点，而不影响其他后代。该缺陷描述了Chrome和Firefox在解释继承的 意义之间的区别。根据 的说法，它似乎不应继承，透明 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.

我试过解决方法来自 Firefox 10 +的3D转换其中建议重新应用 transform-style：preserve-3d （具有或不具有 -moz -

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.

移动透视和透视原始到< ul> 可修复Firefox中的问题。

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

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