Html CSS3卡翻转故障

我使用CSS创建了一个HTML翻转卡。然而，当卡片翻转时会出现闪烁（好像它几乎不会完全翻转）。此故障主要发生在光标直接移动到卡的中心时

非常感谢您的帮助

.card-box{
宽度：100px；
高度：50px；
位置：相对位置；
}
.卡片{
位置：绝对位置；
宽度：100%；
身高：100%；
变换样式：保留-3d；
过渡：1s轻松；
}
.卡：悬停{
变换：旋转（180度）；
}
.前线{
背景：红色；
宽度：100%；
身高：100%；
位置：绝对位置；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.回来{
背景：蓝色；
位置：绝对位置；
宽度：100%；
身高：100%；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
变换：旋转（180度）；
}

正面
返回

已添加

.card-box:hover .card {
      transform: rotateY(180deg);
    }

.card-box{
宽度：100px；
高度：50px；
位置：相对位置；
}
.卡片{
位置：绝对位置；
宽度：100%；
身高：100%；
变换样式：保留-3d；
过渡：1s轻松；
}
.卡片盒：悬停.卡片{
变换：旋转（180度）；
}
.前线{
背景：红色；
宽度：100%；
身高：100%；
位置：绝对位置；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.回来{
背景：蓝色；
位置：绝对位置；
宽度：100%；
身高：100%；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
变换：旋转（180度）；
}

正面
返回

已添加

.card-box:hover .card {
      transform: rotateY(180deg);
    }

.card-box{
宽度：100px；
高度：50px；
位置：相对位置；
}
.卡片{
位置：绝对位置；
宽度：100%；
身高：100%；
变换样式：保留-3d；
过渡：1s轻松；
}
.卡片盒：悬停.卡片{
变换：旋转（180度）；
}
.前线{
背景：红色；
宽度：100%；
身高：100%；
位置：绝对位置；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.回来{
背景：蓝色；
位置：绝对位置；
宽度：100%；
身高：100%；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
变换：旋转（180度）；
}

正面
返回

将鼠标悬停在卡盒上，然后将目标卡元素置于其上！！非常感谢。将鼠标悬停在卡盒上，然后将目标卡元素设为目标，就是这样！！非常感谢。