在css中声明的相反方向上翻转正面卡片为什么？

我有一个类为.card的父div，它必须是children div，当父div被悬停在上面时，它会以相反的方向旋转，以创建一张翻转的卡片。如果将鼠标悬停在其上并等待过渡完成，则效果良好，但是如果将鼠标悬停在其上，则在动画使用类完成div之前移动鼠标。front以相反的方向旋转，原因何在？是否有方法解决此问题？此外，如果你多次打开和关闭鼠标，两个孩子在不同的时间开始转动，即使他们有相同的触发器-为什么

---

添加一个div并使用

透视

和

变换样式：preserve-3d获取它
下面是一个例子


.flip{
宽度：300px；
高度：500px；
透视图：1000px；
}
.翻盖盒{
宽度：300px；
高度：500px；
位置：相对位置；
过渡：所有0.4s线性；
-webkit转换：所有0.4s线性；
变换样式：保留-3d；
-webkit变换样式：保留-3d
}
.前面，.后面{
位置：绝对位置；
宽度：300px；
高度：500px；
顶部：0px；
左：0px；
边框：1px实心#666；
背面可见性：隐藏；
-webkit背面可见性：隐藏；
}
.前线{
颜色：红色；
字体大小：16px；
}
.回来{
颜色：蓝色；
字号：18px；
变换：旋转（180度）；
-webkit变换：旋转（180度）；
}
.flip：悬停。翻转框{
变换：旋转（180度）；
-webkit变换：旋转（180度）；
}

你好
拜伊
试试这个


.card容器{
透视图：1000px；
}
.card容器：hover.card、.card-container.hover.card{
变换：旋转（180度）；
}
.card容器、.front、.back{
宽度：100px；
高度：160px；
保证金：1px；
}
.卡片{
转换：1s易入易出0s；
变换样式：保留-3d；
位置：相对位置；
}
.前面，.后面{
背面可见性：隐藏；
位置：绝对位置；
排名：0；
左：0；
}
.前线{
z指数：2；
变换：旋转（0度）；
背景色：红色；
}
.回来{
变换：旋转（180度）；
背景颜色：蓝色；
}

前面
返回

  .card,.front,.back{
    width: 100px;
    height: 160px;
    margin: 1px;
  }
  .card{
    position: relative;
  }
  .front{
    background-color: red;
    transform: perspective(400px) rotatey(0deg); 
    backface-visibility: hidden;
    transition: transform 1s ease-in-out 0s;
  }
  .back{
    backface-visibility: hidden;
    transform: perspective(400px) rotatey(180deg); 
    background-color: blue;
    transition: transform 1s ease-in-out 0s;
    position: absolute;
    top: 0;
  }

  .card:hover .front{
    transform: rotatey(-180deg);
  }
  .card:hover .back{
    transform: rotatey(0deg);
  }