CSS透视图在Internet Explorer 10或Firefox中无效

Question

我有一个jQuery图像滚动条,使用perpective和transform: translateZCSS属性模拟深度.它在Chrome中正确呈现,但在IE10或Firefox中无法呈现.

这是完整的项目(点击"Who's coming"菜单链接查看图像滚动条):http: //www.girlguiding.org.uk/test/biggig/index.html 这里是相关代码的jsFiddle :http: //jsfiddle.net/moosefetcher/rxCMr/28/ (我不知道为什么,但stackoverflow告诉我我需要包含链接到jsFiddle的代码,所以这里是css)...

.scroller {
    position: relative;
    perspective: 150;
    -webkit-perspective: 150;
    -ms-perspective: 150;
    -moz-perspective: 150;
}
.artistBox {
    width: 228px;
    height: 268px;
    background-color: #000000;
    border-radius: 16px;
    position: absolute;
    overflow: hidden;
    z-index: 4;
}
.artistBox p {
    position: absolute;
    font-family:"Arial", sans-serif;
    color: white;
    font-size: 22px;
}
.artistBoxFront {
    z-index: 5;
}
.artistBoxNew {
    z-index: 3;
    opacity: 0;
}
.scrollerButton {
    position: absolute;
    top: 128px;
    width: 32px;
    height: 32px;
    border: 2px solid white;
    border-radius: 32px;
    background-color: #F49D19;
    box-shadow: 1px 1px 3px #555588;
    z-index: 6;
}
.scrollerButtonOver {
    background-color: #ffaa26;
    box-shadow: 2px 2px 3px #555588;
}

请注意,我已尝试过这两种方法,包括-ms-在属性上排除前缀的AND .(当前的jsFiddle既包括,也包括-webkit-和-moz-).任何人都知道为什么这可能不适用于IE10？干杯.

Answer 1

长度单位

IE和Firefox在perspective值(px,em)上需要一个长度单位.

   -moz-perspective: 800px;
        perspective: 800px;

对于Chrome和Safari,使用-webkit前缀时,长度单位是可选的.

-webkit-perspective: 800;    /* This works with or without the px unit */

W3C标准

为所有perspective值添加长度单位更安全.它与W3C标准更加一致.这是所有浏览器都支持的一种方法.一旦Chrome和Safari开始支持perspective没有前缀,它们可能需要一个单位长度(为了与W3C标准和其他浏览器保持一致).

-webkit-perspective: 800px;
   -moz-perspective: 800px;
        perspective: 800px;

注意:w3schools.com上的当前信息已过时.没有提到对IE10或Firefox的支持,他们的例子没有长度单位.developer.mozilla.org上的最新示例包括一个长度单位,符合W3C标准.