CSS3翻转卡IE

Question

我有这段代码：

<section class="container">
   <div id="card">
      <figure class="front">front side</figure>
      <figure class="back">back side</figure>
   </div>
</section>

https://jsfiddle.net/gt99eyun/3/

适用于chrome，firefox，但不适用于IE，即使是最新的10和11。

我在IE浏览器中注意到，如果我关闭了

backface-visibility: hidden; 

表示背面，然后显示正确。

这就像我这样做：

#card.flipped .back {
    backface-visibility: visible;
}

然而这并不好，因为它在添加翻转类时会立即发生。

我可以在IE中完成这项工作吗？