Reverse visibility not working in IE10 - works fine in webkit

Question

I am creating a simple flip animation with the pure alias css, it should work in IE10, but unfortunately I did not write it.

jsFiddle demo here or html zip example here

I see that reverse visibility works in IE10 from their demo here , so maybe I just missed something stupid, maybe a fresh pair of eyes can help!

Thanks in advance!

Answer 1

Well, some Microsoft IE developers saw my tweet and entered again with the fix!

IE10 doesn't seem to support save-3d, and they hacked this jsFiddle demo

Many thanks to @reybango and @sgalineau for their help - much appreciated.

Answer 2

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

Rear visibility works on IE10 when it is applied to the element itself (if applied to the parent, it will not work). You must combine it into the same conversion property as follows:

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

Answer 3

I only have backward visibility applicable to the child, and IE10 shows the downside anyway. Removing save-3d affects one of the main visual features of 3D animation, so this is not a really viable workaround.

Unfortunately, the demo mentioned above by @reybango and @sgalineau changes the look of the effect from 3D rotation to just changing the 2d width, so this is not a viable workaround.

The bottom line is that IE10 needs to be updated to support the specification of 3D CSS animations as written.

Answer 4

(This is a comment about why the microsoft 360 ° example works.)

First, consider the example itself, the MS workaround removed the save-3d transform-style property from the source code.

It turns out that IE10 does not support backup-3d , and they offer such a workaround for msdn:

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

With the converted style set to the default "flat", children inherit parent rotation. Thus, the front and back sides of the card rotate 360 ​​° (= 0 °), the trick here is that the back side will be displayed on top, because it comes later in the DOM.

To make this more obvious, I added opacity:0.5 in the opposite direction for both examples, now you can see what is really happening:

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

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

Thus, the MS method will work in some scenarios, but not all without real support for saving-3d

Answer 5

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

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