0

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?

moosefetcher
  • 1,841
  • 2
  • 23
  • 39

1 Answers1

2

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

dsgriffin
  • 66,495
  • 17
  • 137
  • 137
  • I had it without the '-ms-' prefix originally and it wasn't working. Is there some other reason it was not working? – moosefetcher Apr 04 '13 at 13:20
  • 1
    @moosefetcher Really? I'm guessing it's some other reason in that case if it wasn't working in ie10 as the MSDN seems pretty clear about it being possible :/ weird – dsgriffin Apr 04 '13 at 13:23
  • @moosefetcher Check this link out of it being used in IE10, might be of a little use to you - http://blogs.msdn.com/b/ie/archive/2012/02/02/css3-3d-transforms-in-ie10.aspx – dsgriffin Apr 04 '13 at 13:30
  • Thanks for the link. Interesting - There's a comment at the bottom of that article that SEEMS to suggest 'perspective' doesn't work on Windows 7 (I'm running Windows 7). Anyone heard similar, or am I misinterpreting that comment? – moosefetcher Apr 04 '13 at 13:39
  • @moosefetcher True, bear in mind though the comments were written over a year ago now, you'd have thought everything would be sorted out for IE10 on W7 by now.. – dsgriffin Apr 04 '13 at 13:51
  • So is there some other problem (that I'm not seeing) that someone's aware of? Any other reason the above code wouldn't work? (it didn't work WITHOUT the '-ms-' either). – moosefetcher Apr 04 '13 at 14:14
  • @moosefetcher Post a jsFiddle? The only reason I can think would be your point of it being IE10 on Windows 7 instead of 8. Did you try that Article demo code on your computer to see if it works for you like in the example? – dsgriffin Apr 04 '13 at 14:15
  • Hmm... not sure how to navigate jsfiddle, sorry. Can't get external images to load and there doesn't seem to be a discernable help (I click on external resources, but nothing happens). Maybe I'll post another question here without the '-ms-' issue muddying it. Unless someone else knows what the problem with the above code is (noting that 'perspective:' IS included AND that it didn't work in IE10 WITHOUT '-ms-' included). Cheers. – moosefetcher Apr 05 '13 at 09:58
  • @moosefetcher What about posting it in jsBin? if not then I hope you find your solution soon anyway! – dsgriffin Apr 05 '13 at 10:01
  • OK, I've got a jsFiddle going... http://jsfiddle.net/moosefetcher/rxCMr/20/ This has depth in Chrome, but not in IE10. – moosefetcher Apr 05 '13 at 12:00
  • @moosefetcher Will take a look now – dsgriffin Apr 05 '13 at 12:25