2013-04-04 35 views
0

我试图使用'perspective:'和'transform:translateZ'css属性来定位div的深度。我有它在Chrome中工作,但不是在IE10或Firefox20。 你可以看到测试here,“谁是未来”菜单页...-ms-perspective不能在Internet Explorer 10中工作

含div有CSS类.scroller:

.scroller { 
    position: relative; 
    perspective: 150; 
    -webkit-perspective: 150; 
    -ms-perspective: 150; 
    -moz-perspective: 150; 
} 

而且,对于内部的div,translateZ设置使用jQuery:

$(this).css('transform', 'translateZ(-' + ((1-$(this).css('opacity')) * 80) + 'px)');       
$(this).css('-webkit-transform', 'translateZ(-' + ((1-$(this).css('opacity')) * 80) + 'px)'); 
$(this).css('-ms-transform', 'translateZ(-' + ((1-$(this).css('opacity')) * 80) + 'px)'); 
$(this).css('-moz-transform', 'translateZ(-' + ((1-$(this).css('opacity')) * 80) + 'px)'); 

但是,它不适用于IE10或Firefox20。有什么我错过了吗?

回答

2

“的角度看之前 的属性,它在Internet Explorer 10和 更高版本支持前缀的。“不要使用Microsoft供应商前缀(” -ms-)” - MSDN.

+0

我原来没有'-ms-'前缀,它不起作用。有没有其他的原因,它不工作? – moosefetcher 2013-04-04 13:20:38

+1

@moosefetcher真的吗?我猜这是在这种情况下,如果它不在ie10中工作的一些其他原因,因为MSDN似乎很清楚它可能:/奇怪 – lifetimes 2013-04-04 13:23:15

+0

@moosefetcher检查此链接是否在IE10中使用,可能是一个对你没什么用处 - http://blogs.msdn.com/b/ie/archive/2012/02/02/css3-3d-transforms-in-ie10.aspx – lifetimes 2013-04-04 13:30:39

相关问题