3

I have this card opening animation that works in Firefox, Chrome, and Safari but I can't seem to get it to work in IE 10/11.

I think it has somthing to do with the 

 backface-visibility: hidden;

but I am not 100% sure.

Any help would be appreciated

Code: http://jsfiddle.net/7k9D9/

tjboswell
  • 853
  • 1
  • 7
  • 15
user1899891
  • 249
  • 2
  • 4
  • 11

1 Answers1

1

There is a bug in IE:

At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.

Reapply the transforms to the children manually. It's lame, but such is IE.

Original post here: https://stackoverflow.com/a/15196468/1435655

Community
  • 1
  • 1
m59
  • 43,214
  • 14
  • 119
  • 136
  • I am new to the whole CSS3 transform thing. Do you know how you would do this? – user1899891 Dec 19 '13 at 14:01
  • @user1899891 the quote from Microsoft above explains the fix. I reworded it in my answer, also. Take the transform properties you applied on the parent element and copy them to the children. preserve-3d isn't working in IE, so you have to do it yourself. – m59 Dec 19 '13 at 14:04
  • If you're quoting someone else in your answer, it's always a good idea to provide a link back to the source. – Spudley Dec 19 '13 at 14:12
  • @Spudley apologies, i did in the comments :) I'll update. – m59 Dec 19 '13 at 14:12
  • I'm pretty sure my jsfiddle already has that. The problem is that the backface-visibility: hidden; keeps it hidden no matter what its position is. – user1899891 Dec 19 '13 at 14:18
  • @user1899891 I don't think so. You should probably start by copying over your `perspective` rules. – m59 Dec 19 '13 at 14:21
  • http://jsfiddle.net/7k9D9/3/ The perspective isn't even needed. This is a version without the perspective or the 3d preserve. The transform was copied over to the child like you said but it still doesn't seem to be working. – user1899891 Dec 19 '13 at 14:31
  • @user1899891 hmm...I didn't pay enough attention, sorry about that. So, as you can see, removing `preserve-3d` makes the behavior the same on all browsers, since IE isn't using it. The trick will be figuring out how to get the same effect. I'll look into it also. – m59 Dec 19 '13 at 14:37