CODEWITHSUNDEEP
jquerycssfirefoxinternet-explorer-10perspective
moosefetcher
moosefetcher

Reputation: 1901

-ms-perspective not working in internet explorer 10

I'm trying to position divs with depth using the 'perspective:' and 'transform: translateZ' css properties. I have it working in Chrome, but not in IE10 or Firefox20. You can see the test here, on the "Who's coming" menu page...

The containing div has the css class .scroller: 

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

And, for the inner divs, translateZ is set using 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)');

But, it's not working in IE10 or Firefox20. Is there something I've missed?

Upvotes: 0

Views: 931

Answers (1)

dsgriffin
dsgriffin

Reputation: 68596

"Do not use the Microsoft vendor prefix ("-ms-") before the perspective property. It is supported unprefixed in Internet Explorer 10 and later." - MSDN.

Upvotes: 2

Related Questions