Étrange animation de transformation css sur MS edge

Question

J'ai fait une animation de tuile pour retourner ma tuile avec un bouton.
Cela fonctionne sur Chrome, Safari, mais dans le navigateur MS Edge, l'animation du flip apparaît étrangement.

Je veux juste un y-rotation et non un de type rotation dans le mot Edge.

Vous pouvez trouver mon code derrière et un exemple pour montrer mon problème sur MS Edge.

Est-ce que quelqu'un a une idée pour corriger le comportement de Edge ?

EDIT : Je suppose que ce n'est pas un problème avec transform-style:preserve-3D parce que c'est compatible avec 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

Le problème est dans ce bloc :

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

Si vous modifiez la transformation de la propriété : "translate3d(0, 0, 0) ;" en transform : translate3d(0, 0, 1), cela fonctionnera bien.