Question

我有一个jQuery图像滚动条，可以使用perpective和transform: translateZ CSS属性模拟深度。它在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;）的单位长度。

-webkit

对于Chrome和Safari，使用-webkit-perspective: 800; /* This works with or without the px unit */前缀时，长度单位是可选的。

perspective

W3C标准

为所有perspective值添加长度单位更安全。它与W3C standard更加一致。这是所有浏览器都支持的一种方法。一旦Chrome和Safari开始支持-webkit-perspective: 800px; -moz-perspective: 800px; perspective: 800px;没有前缀，它们可能需要一个单位长度（为了与W3C标准和其他浏览器保持一致）。

{{1}}

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

Answer 2

它没有工作，因为没有WebKit浏览器删除perspective属性。该属性要么接受none，要么接受长度值。长度需要一个单位，除非该值为0.如果添加单位，例如px，它可以在IE和Firefox中使用。

请参阅http://jsfiddle.net/rxCMr/31/

我删除了-ms-属性，因为在最终版本中没有前缀的IE10中添加了透视图。我还最后移动了没有前缀的版本，因此它胜过前缀版本。

我不确定它为什么在WebKit中工作。它应该删除像Firefox和IE的属性，但我想它正在进行错误恢复。

Answer 3

我使用的是Matthew Wagerfield的ParallaxJS和perspective: 4000px，但它仍然无法在IE10 / 11中使用，而在Chrome和Firefox中完全没问题。

标记

<ul class="container">
    <li class="layer">...</li>
    <li class="layer">...</li>
    <li class="layer">...</li>
</ul>

在perspective: 4000px上定义.container对于FF和Chrome来说很不错，但只有在.layer上定义时才开始为IE工作。所以也许检查一下。可能与我设置的无数transform-style: preserve-3d || flat有其他关系，但要点是：检查选择哪个选择器。

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

3 个答案: