Javascript 使用CSS转换生成工件

我正在尝试使用“figure”实现翻转动画。它可以在每个浏览器中运行，但有一种特殊情况，即在VMWare上的虚拟机（使用Windows 10 x64虚拟机测试）中使用Firefox运行代码时，会出现一些奇怪的工件

#card.flipped {
 -webkit-transform: translateX( -100% ) rotateY( -180deg );
 -moz-transform: translateX( -100% ) rotateY( -180deg );
 -ms-transform: translateX( -100% ) rotateY( -180deg );
 -o-transform: translateX( -100% ) rotateY( -180deg );
 transform: translateX( -100% ) rotateY( -180deg );
}

代码如下：

请忽略“正面”标题。我试图修复的是当图形旋转时可以看到的图标副本，你可以在背景变黑之前看到它。黑色不是一个问题，我正在使用我的网站内的代码，但在过渡后，你看到在左边说，像一个复制的图标，但以一种奇怪的方式转换，我尝试了一整天来寻找问题，但只有当我不使用转换持续时间它的作品，但我没有得到动画

---

你知道问题出在哪里吗？

我正在Firefox中运行你的JSFIDLE（在Ubuntu上，没有虚拟机）。这对我来说很好。只有在VMWare中运行时才会发生这种情况吗？是的，只有在VM中运行时才会发生这种情况