在Edge中消失具有CSS过渡效果的元素

Question

我有一个等距的动画立方体，当侧面悬停时会旋转。在IE 11，Chrome等中，它的反应和功能符合我的预期，但是在Edge中，过渡效果似乎呈现不同的方式，并且过渡期间侧面消失了。

https://jsfiddle.net/Sideburnt/3znb469s/1/

我认为3dtransform以及绝对定位的子元素可能存在问题。

我的主容器使用透视图值将等轴测立方转换为正确的视图；

perspective: 1000px;

我有一个辅助容器，用于定义等距所需的3D视图；

.isoCube .cubeWrap {
        transform: translate3D(0, 0, -10em);}

每个立方体面都有一个过渡；

transition: transform 0.25s ease-in-out;

以下是其中一个立方体面的示例

.isoCube .top {
transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate3D(0, 0, 8em);}

我正在使用javascript将类转换为立方体面容器，然后更改转换值；

.isoCube .cubeWrap.rotateLeft div.top {
transform: rotateX(90deg) rotateY(0deg) rotateZ(-90deg) translate3D(0, 0, 8em);}