MS边缘上奇怪的css变换动画

Question

我制作了一个磁贴动画，用一个按钮翻转我的磁贴。
它在 Chrome、Safari 上运行，但在 MS Edge 浏览器中，翻转动画看起来很奇怪。

我只想要一个 y-rotation 而不是 Edge 中的 类似旋转的。

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

有没有人有解决 Edge 行为的想法？

编辑：我想transform-style:preserve-3D 兼容性不是问题，因为它与 Edge 兼容。

document.getElementById("btn-front").addEventListener("click", function(){
  document.getElementById("flip").className = "flipped";
});

document.getElementById("btn-back").addEventListener("click", function(){
  document.getElementById("flip").className = "";
});

#flip {
  transform-style: preserve-3d;
  transition: transform 1s;
  transform: translate3d(0, 0, 0);
  transform-origin: 150px 150px 0;
}
#front {
  background-color: red;
  transform: translate3d(0px, 0px, 2px);
}
#back {
  background-color: green;
  transform: translate3d(0px, 0px, 1px) rotateY(180deg);
}
.tile {
  height: 200px;
  width: 200px;
  position: absolute;
  top: 50px;
  left: 50px;
  backface-visibility: hidden;
}
.button {
  height: 30px;
  width: 100px;
  margin: 75px 50px;
}
#flip.flipped {
  transform: translate3d(0, 0, 0) rotateY(-180deg);
}

<div id="flip">
  <div id="front" class="tile">
    <button id="btn-front" class="button">Go to back</button>
  </div>
  <div id="back" class="tile">
    <button id="btn-back" class="button">Go to front</button>
  </div>
</div>

Answer 1

问题出在那个区块：

#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) 它将正常工作。