CSS Card翻转在旋转时产生不需要的响应

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

元素的背面始终是透明背景，.front 和 .back 类中已经提到了 backface 属性。 .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 2

请设置卡片翻转的 3D 透视图。请将此代码添加到容器 div 中。

-webkit-perspective: 1000;

喜欢这个

 .container{
-webkit-perspective: 1000;
}

Answer 3

将背面可见性更改为可见
并将 transform-style: preserve-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;
  }