backside-visibility not working in IE10 - works fi

问题:

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 here

I can see that backside-visibility works in IE10 from their demo here so maybe I've just overlooked something stupid, maybe a fresh pair of eyes might help!

Thanks in advance!

回答1:

Well some Microsoft IE devs saw my tweet and jumped in with a fix already!

Apparently IE10 does not support preserve-3d, and they whipped up this jsFiddle demonstration

Big thanks to @reybango and @sgalineau for the help - very much appreciated.

回答2:

This seems to be a duplicate of CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround

The backside-visibility is working on IE10 when it is applied to the element itself (if applied to the parent, it will not work). You should combine it in the same transform property like this:

.back{
  transform : perspective(1000px) rotateY(0deg);
}
.front{
  transform : perspective(1000px) rotateY(180deg);
}

回答3:

I only have the backface-visibility applied to the child element, and IE10 shows the backface anyway. Removing preserve-3d defeats one of the main visual features of 3d animation, so it's not really a viable workaround.

Unfortunately the demo referred to above by @reybango and @sgalineau changes the effect appearance from a 3d rotation to a simple 2d change in width, so it's not a viable workaround either.

Bottom line is that IE10 needs to be upgraded to support the CSS 3d animation spec as written.

回答4:

(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

回答5:

Here is my solution. http://jsfiddle.net/UwUry/531/

I tried on IE 11 and Chrome. It worked like a flip box.