MS Edge 上 perspective/transform 转换中的故障

Question

我在 MS Edge 上遇到了一个奇怪的问题。我想使用 css rotateY() 函数结合透视属性为 Y 轴周围的门（div 标记）设置动画。问题是从正值到负值（50deg => -100deg）的插值角度会产生接近零的毛刺。

这是简化的代码：https://codepen.io/stephanemill/pen/LYGowqo - Microsoft Edge 44.18362.449.0

.wrapper {
    margin-left: 200px;
    perspective: 500px;
   perspective-origin: 0% 0%;
  }
  
  .flip {
    width: 100px;
    height: 200px;
    background: gold;  
    transition: transform 4s;
    transform-origin: 0px 0px;
    transform: rotateY(50deg);
  }
  
  .flip:hover {
    transform: rotateY(-100deg);  
  }

它不是很明显，但可以根据上下文放大效果。

经过大量测试，我知道：

-这不是来自 hover
-没有透视属性时bug消失
-从-3deg到-100deg的插值错误消失

Answer 1

我可以在 Edge Legacy 中重现该问题。门在变形时看起来像抽动一次。我认为这是由于不同浏览器使用不同的渲染引擎。

要解决此问题，您可以使用CSS transform perspective() function instead of CSS perspective property。示例代码如下：

.wrapper {
  margin-left: 200px;
  /*perspective: 500px;*/
  perspective-origin: 0% 0%;
}

.flip {
  width: 100px;
  height: 200px;
  background: gold;
  transition: transform 4s;
  transform-origin: 0px 0px;
  transform: perspective(500px) rotateY(10deg);
}

.flip:hover {
  transform: perspective(500px) rotateY(-100deg);
}

<div class="wrapper">
  <div class="flip">
  </div>
</div>

它在 Edge Legacy 中运行良好。您可以查看结果：

MS Edge 上 perspective/transform 转换中的故障

Glitch in perspective/transform transition on MS Edge

css

perspective

css-transitions

css-transforms

microsoft-edge