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 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);
}