CSS卡翻轉在旋轉時產生不必要的響應

Question

這是用於簡單的卡翻轉。正面寫有'FIRST'。 當我將鼠標懸停在div上時，卡片翻轉到背面，當鼠標離開時，卡片翻轉回正面。

此時，當鼠標即將離開時，卡片立即顯示正面，然後它旋轉回正常方向。我相信它正在跳過0.6s的過渡時期，它將要回轉。

這裏是JSFiddle

的思考？
CSS：

h1{ 
     margin: 0; 
     padding: 0; 
     } 
    .container{ 
     margin: auto; 
     left: 34%; 
     top: 20%; 
     position: relative; 
     } 
    .card{ 
     text-align: center; 
     width: 300px; 
     height: 300px; 
     -webkit-backface-visibility: hidden; 
     transition: all 0.6s ease-in-out; 
     position: absolute; 
     text-align: center; 
     line-height: 300px; 
     } 
    .card:hover{ 
     transform-style: preserve-3d; 
     transform: rotateX(180deg); 
     } 
    .front{ 
     border: 2px solid; 
     border-radius: 25px; 
     position: absolute; 
     background: red; 
     width: 100%; 
     height: 100%; 
     -webkit-backface-visibility: hidden; 
     } 
    .back{ 
     border: 2px solid; 
     border-radius: 25px; 
     position: absolute; 
     background: blue; 
     transform: rotateX(180deg); 
     width: 100%; 
     height: 100%;  
     -webkit-backface-visibility: hidden; 
     } 

HTML：

<div class='container'> 
    <div class='card'> 
     <div class='front'> 
      <h1>First</h1> 
     </div> 
     <div class='back'> 
      <h1>Last</h1> 
     </div> 
    </div> 
</div> 

Answer 1

變化背面能見度可見
和移動變換風格：保持-3D;如果有到.card類
一個使用這種風格的地方，它在這裏。
這裏是元件的JSFiddle

.card{ 
    text-align: center; 
    width: 300px; 
    height: 300px; 
    -webkit-backface-visibility: visible; 
    -moz-backface-visibility: visible; 
    backface-visibility: visible; 
    transition: all 0.6s ease-in-out; 
    position: absolute; 
    text-align: center; 
    line-height: 300px; 
    transform-style: preserve-3d; 
    } 

Answer 2

的背面總是，背面場所在.front.back和類已經提到的透明背景。 .card css中確實不需要。

從卡類中移除背面。

.card{ 
    width: 300px; 
    height: 300px; 
    transition: all 0.6s ease-in-out; 
    position: absolute; 
    text-align: center; 
    line-height: 300px; 
    } 

http://jsbin.com/ruhofereza/2/

Answer 3

請設定卡翻轉你的3D立體圖。請在容器div中添加此代碼。

-webkit-perspective: 1000; 

這樣

.container{ 
-webkit-perspective: 1000; 
}