title: Why doesn't this rotate3d() CSS transform work as expected in Internet Explorer 10?
body: <p>I'm trying to create a "card flip" effect using CSS transforms and transitions. I'm using a <code>&lt;div&gt;</code> to represent the card, and two child <code>&lt;div&gt;</code>s to represent the front and back faces of the card. Both faces are absolutely positioned on top of each other, and the latter has a 180-degree transform to turn it backwards.</p>
  
  <p>I created a jsFiddle to illustrate my current approach:</p>
  
  <p><a href="http://jsfiddle.net/sCyLV/1/" rel="nofollow">http://jsfiddle.net/sCyLV/1/</a></p>
  
  <p>The effect works as intended in Chrome &amp; Firefox (latest versions). However, in IE10, the card appears to flip on both axes, and the back side of the card doesn't appear as the card is flipped - I just see the back side of the front card. Does anyone know why?</p>
  
  <p>I would also love to hear any alternative ideas to accomplish this effect. The only functional requirement is that this effect has to be repeatable in the same direction - i.e., the card will flip in a continuous loop as if it's spinning about the y-axis. Once I get the flipping behavior under control, I will be dynamically swapping out the content on the backside upon each 180-degree rotation, leading to new content being shown on its face each time it turns around.</p>