CSS转换不正确

Question

我有一个奇怪的问题。我有一个包含两个图像的CSS翻转动画。

问题是，在第一次转换时，首先隐藏的图像不能很好地转换，而是在转换结束时立即显示。

但是，在第一次转换后，问题消失并且之后正常工作。

尽管应用程序是用angularjs编写的，但我认为这是一个CSS问题。我怎么能解决这个问题？

我创建了一个小提琴有希望解释这个问题：

Fiddle

HTML：

<table> 
    <tr> 
     <td ng-click="flipCard()"> 
      <div class="card-container"> 
       <div class="card" ng-class="{'flipped': !deckVisible}"> 
        <img class="front" ng-src="http://dummyimage.com/128x96/000/fff.jpg&text=3"> 
        <img class="back" ng-src="http://dummyimage.com/128x96/000/fff.jpg&text=5"> 
       </div> 
      </div> 
     </td> 
    </tr> 
</table> 

CSS：

.card-container { 
    position: relative; 
    width: 220px; 
    height: 147px; 
    -webkit-perspective: 800px; 
    -moz-perspective: 800px; 
    -ms-perspective: 800px; 
    -o-perspective: 800px; 
    perspective: 800px; 
} 

.card { 
    width: 100%; 
    height: 100%; 
    -webkit-transition: -webkit-transform 1s; 
    -moz-transition: -moz-transform 1s; 
    -ms-transition: -ms-transform 1s; 
    -o-transition: -o-transform 1s; 
    transition: transform 1s; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    -o-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 

.card.flipped { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 

.card img { 
    position: absolute; 
    display: block; 
    height: 100%; 
    width: 100%; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    backface-visibility: hidden; 
} 

.card .back { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 

Answer 1

DEMO

.card .back { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    -o-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 

你忘了保存-3D在后面图像