Javascript MS edge上奇怪的css变换动画

我制作了一个平铺动画，用按钮翻转我的平铺。
它在Chrome和Safari上工作，但在MS Edge浏览器中，翻转动画看起来很奇怪

我只想要一个

y旋转

，而不是像Edge那样的旋转

您可以在MS Edge上找到我的代码和示例来显示我的问题

有人有办法修复边缘行为吗

编辑：我想它与

变换样式：preserve-3D

兼容性没有问题，因为它与边缘兼容

document.getElementById（“btn前端”）.addEventListener（“单击”，函数（）{
document.getElementById（“flip”）.className=“flipped”；
});
document.getElementById（“btn back”）.addEventListener（“单击”，函数（）{
document.getElementById（“flip”）.className=“”；
});
#翻转{
变换样式：保留-3d；
转变：转变1s；
变换：translate3d（0,0,0）；
变换原点：150px 150px 0；
}
#正面{
背景色：红色；
转换：translate3d（0px，0px，2px）；
}
#背{
背景颜色：绿色；
变换：平移3d（0px，0px，1px）旋转（180度）；
}
.瓷砖{
高度：200px；
宽度：200px；
位置：绝对位置；
顶部：50px；
左：50px；
背面可见性：隐藏；
}
.按钮{
高度：30px；
宽度：100px；
利润率：75像素50像素；
}
#翻转，翻转{
变换：平移3D（0,0,0）旋转（-180度）；
}

返回
到前面去
问题出在该块中：

#flip {
transform-style: preserve-3d;
transition: transform 1s;
transform: translate3d(0, 0, 0);
transform-origin: 150px 150px 0;
}

如果您更改属性转换：“translate3d（0，0，0）；”以转换：translate3d（0，0，1），它将正常工作。
检查此项：@Dekel:谢谢，但这不是同一个问题，因为“transform style:preserve-3D”应该是边缘兼容的：Hernandez:您的答案是正确的，但我需要使用translate3d来使用图形硬件加速。Translate2d不使用硬件加速。原因是：我的web应用程序是Cordova应用程序，在手机上运行。来源：#flip{变换样式：preserve-3d；变换：transform 1s；变换：translate3d（0,0,0）；变换原点：150px 150px 0；}如果从以下位置更改：#flip{变换样式：preserve-3d；变换：transform 1s；变换：translate3d（0,0）；变换原点：150px 150px 0；}到#flip{变换样式：preserve-3d；transition:transform 1s；transform:translate3d（0，0，1）；transform origin:150px 150px 0；}，它会工作得很好。只需这个小“1”…谢谢@Michael Hernández，没错！我会让你修改你的答案，并验证它