CSS轉換不正確

我有一個奇怪的問題。我有一個包含兩個圖像的CSS翻轉動畫。CSS轉換不正確

問題是，在第一次轉換時，首先隱藏的圖像不能很好地轉換，而是在轉換結束時立即顯示。

但是，在第一次轉換後，問題消失並且之後正常工作。

儘管應用程序是用angularjs編寫的，但我認爲這是一個CSS問題。我怎麼能解決這個問題？

我創建了一個小提琴有希望解釋這個問題：

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); 
}

來源

2014-10-04 flash

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在後面圖像

來源

2014-10-04 14:24:13 himanshu

這是一種奇怪的還有，如果你簡單地添加**'背景色family：宋體;'**的**'.card img' * *，它也解決了這個問題。 ** [分叉小提琴]（http://jsfiddle.net/qju4kt5n/）** – ryeballar 2014-10-04 14:32:39

是的，對於單個問題有許多解決方案。重要的是首先在你的腦海中點擊哪一個 – himanshu 2014-10-04 15:14:39

CSS轉換不正確

回答

相關問題