backside-visibility not working in IE10 - works fine in webkit

Question

I\'m building a simple pure-css \'card flip\' animation, it has to work in IE10, but sadly what I\'ve written doesn\'t.

jsFiddle demo here or sample html zip

Answer 1

(This is to comment on why microsoft's 360° turn example works.)

First take a look at the example itself, MS's workaround removed the preserve-3d transform-style property from initial code.

Turns out IE10 has no support for preserve-3d, and they suggest such workaround on msdn:

http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property

With transform-style set to default 'flat' value, child elements will inherit parent rotation. Thus both card front/back are rotated to 360° (= 0°), the trick here is that back side will appear on top, because it comes later in DOM.

Just to make this a bit more apparent, I added opacity:0.5 to back-side for both examples, now you can see what's really going on:

http://jsfiddle.net/7FeEz/12/

http://jsfiddle.net/ax2Mc/71/

So the MS way will work in some scenarios, but not all without real support for preserve-3d