5

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!

Community
  • 1
  • 1
felixthehat
  • 849
  • 2
  • 9
  • 24
  • Try this... http://jsfiddle.net/NAy2r or try @resonic's suggestion. Both worked in IE10 for me –  Feb 08 '13 at 22:39

5 Answers5

7

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.

felixthehat
  • 849
  • 2
  • 9
  • 24
  • 2
    I would be really interested why this works. Turning both elements by 360° does not make sense to me. The should both be in the same position afterwards, shouldn't they? – samy-delux Aug 27 '12 at 11:04
  • Yeah that makes no sense to me, either. Anyone know why this is? – ericb Dec 02 '12 at 08:21
  • This seems to work. But no perspective. As soon as I add `px` to the perspective value, the perspective works, but it spins like crazy. (IE 10.0.9200.16438 on Windows 7) – xsonic Dec 07 '12 at 15:09
  • That jsFiddle just crashed IE 10.0.9200.16540 on Windows 7 64bit. – styfle Jul 02 '13 at 18:27
3

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);
}
Community
  • 1
  • 1
redochka
  • 12,345
  • 14
  • 66
  • 79
  • You deserve a medal. I spent 2 hours getting that property to work with JS, but only with animations. *slow handclap*. –  Feb 08 '13 at 22:37
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.

Max West
  • 755
  • 7
  • 11
2

(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

bitinn
  • 9,188
  • 10
  • 38
  • 64
0

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

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

Birol İnci
  • 81
  • 7
  • in IE 11 it flips the card, but the back card suddenly only appears after the flip - its not a clean transition. – MarzSocks Jan 21 '16 at 04:16