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）它会正常工作。

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

1 个答案: