8

我有一个 jQuery 图像滚动器，它使用perpective和transform: translateZCSS 属性来模拟深度。它在 Chrome 中正确呈现，但在 IE10 或 Firefox 中不正确。

这是完整的项目（单击“谁来”菜单链接查看图像滚动条）： 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-属性上的前缀。（当前的 jsFiddle 包括 ，-webkit-和-moz-）。任何人都知道为什么这在 IE10 中可能不起作用？干杯。

4

3 回答 3

10

长度单位

IE 和 Firefox 要求perspective值有一个长度单位 ( px, em)。

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

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

-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 标准一致的长度单位。

于 2013-04-16T21:53:22.880 回答
2

它不起作用，因为没有 WebKit 浏览器丢弃透视属性。该属性要么接受，要么接受none长度值。长度需要一个单位，除非该值为 0。如果添加一个单位，例如 px，它在 IE 和 Firefox 中有效。

见http://jsfiddle.net/rxCMr/31/

我删除了 -ms- 属性，因为在最终版本中没有前缀的情况下将透视图添加到 IE10。我最后还移动了不带前缀的版本，以便它胜过带前缀的版本。

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

于 2013-04-16T20:44:56.047 回答
0

我正在使用 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在 FF 和 Chrome 上定义.container很好，但在.layer. 所以也许检查一下。可能与transform-style: preserve-3d || flat我设置的无数内容有关，但要点是：检查您的视角设置在哪个选择器上。

于 2017-09-01T08:47:32.113 回答