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

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

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

@H_403_8@.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; }

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

解决方法

长度单位

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

@H_403_8@-moz-perspective: 800px; perspective: 800px;

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

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

W3C标准

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

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

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

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

解决方法

猜你在找的CSS相关文章