CSS卡翻转在向后旋转时产生不需要的响应

这是一个简单的卡片翻转。正面写着“第一个”。 当我将鼠标悬停在div上时，卡翻转到背面，当鼠标离开时，卡翻转到正面

此时，当鼠标即将离开时，卡会立即显示正面反转，然后旋转回正常方向。我认为它将要返回时跳过了0.6秒的过渡

这是你的电话号码

想法？
CSS:

HTML:

弗斯特
最后

将背面可见性更改为可见
并移动变换样式：preserve-3d；到.card类
如果有一个地方可以使用这种风格，那就是这里。
这是你的电话号码

---

元素的背面始终是透明背景，背面属性已在

.front

和

.back

类中提到。在

.card

css中不需要

从卡类中删除背面

---

请设置卡片翻转的3d透视图。请在container div中添加此代码

-webkit-perspective: 1000;

像这样

 .container{
-webkit-perspective: 1000;
}

---

试过这么做，没什么不同。通过增加背面可见性，什么都没有改变。卡片类你的问题是第一次书写的倒转吗？是的。一旦要反转，而不是背面慢慢旋转以显示正面，正面立即反转显示，然后返回到正常方向。检查JSFIDLE链接我做了一些更改，检查您想要的是否确实稍微改变了动画的外观，但是反转的错误“第一”写作仍在发生

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

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

-webkit-perspective: 1000;

 .container{
-webkit-perspective: 1000;
}