IE 11中的背景

Question

我已经设法让我的翻转卡在FF，Chrome中正常工作，我还没有测试过Opera和IE是一种痛苦。

卡片在IE中正确显示并翻转，但是当卡片被翻转时，它会显示正面内容倒置而不是卡片背面的内容。

我已经阅读了一些关于IE 10不支持保留3d的内容，但说实话我不知道那是什么，因为我已经改编了我在某人演示中使用的代码。

任何人都可以帮助我获取卡片的背面内容，以便在翻转时显示吗？

http://jsfiddle.net/GFVxD/2/

  .stage {
  -webkit-perspective: 1000; 
    -moz-perspective: 1000;
    -o-perspective: 1000; 
    perspective: 1000;
}

.flashcard {
  height: 300px;  
  width: 500px; 
  margin: 10% auto;
  border: 1px solid gray; 
  box-shadow: 2px 2px 2px #000;
  -webkit-transform-style: preserve-3d;  
  transition: all 0.3s;               
  -webkit-transition: all 0.3s;
   transform-style: preserve-3d;
    transition:all 1s linear;
}

.flipped, .back {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg); 
}

.front, .back {
  height: 300px;          
  width: 500px;
  position: absolute;    
  text-align: center;   
-moz-backface-visibility:hidden;
-webkit-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden; 
}
.front p {  
margin-top: 10%;         
font-size: 1.5em;  
line-height: 30px;}

.back p {  

margin-top: 10%;         
font-size: 1em;  
line-height: 30px;}

.qanswer p {    
font-size:4px;}