Jquery 为什么'；这个CSS转换完成了吗'；让我们移动悬停

我有一个按钮，可以在悬停时进行转换。但不知何故，它有时并没有完成它的转变。它走到一半，然后停下来或卡在那里。我怎样才能使它在悬停后强制完成其转换

div.shuffle{
背景图片：url(https://goo.gl/PydgT2);
背景色：透明；
宽度：32px；
高度：32px；
过渡：所有0.3s线性；
}
div.shuffle:悬停{
变换：rotateX（180度）；
-webkit变换：rotateX（180度）；
}

---

您看到的是预期的行为，因为当您在元素上使用

rotateX

时，由于元素旋转，其边界开始收缩（边界并不完全收缩，但其在画布上的投影（我们将其视为输出）会收缩）。因此，当您继续移动鼠标时，有时鼠标实际上会超出元素的当前边界。我在下面的代码片段中为元素添加了一个边框，以便您查看发生了什么

当鼠标处于静态时，您看不到问题，因为UA仅在鼠标移动时才会触发悬停输入/输出事件。当元素的边界发生变化时，它不会触发事件，因为这样会产生大量开销

div.shuffle{
背景图片：url(https://goo.gl/PydgT2);
背景色：透明；
宽度：32px；
高度：32px；
边框：1px实心；
过渡：所有0.3s线性；
}
div.shuffle:悬停{
变换：rotateX（180度）；
-webkit变换：rotateX（180度）；
}

---

在堆栈代码段演示中运行良好。你在这里也看到了同样的问题吗？@charlietfl谢谢你的评论。是的，这里也有问题。然而，当光标在中间移动时，你会看到图标停留在中间，然后移动到正常位置。此外，您是否需要过渡持续时间才能使过渡可见？如果没有问题，请检查无持续时间的行为。您可以使用

transform:initial更新
div.shuffle
css属性

将div恢复到初始状态。@pratikwebdev我试图添加，

webkit transform-origin:initial

对现有代码进行了修改，但没有解决该问题。然而，你的意思是同时拥有

转换

和

转换

属性吗？@charlietfl我在Safary和Chrome上试用过。双方都有问题