Переход 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 на спине изображение