MS Edge 上的透视/变换过渡出现故障答案

【问题标题】：Glitch in perspective/transform transition on MS EdgeMS Edge 上的透视/变换过渡出现故障
【发布时间】：2020-11-18 22:07:52
【问题描述】：

我在 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);  
  }

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

经过大量测试，我知道：

-这不是来自悬停
-当没有透视属性时，该错误消失
-从 -3deg 到 -100deg 的插值错误消失了

【问题讨论】：

标签： css css-transitions microsoft-edge css-transforms perspective

【解决方案1】：

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

要解决此问题，您可以使用 CSS transform perspective() function 代替 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 中运行良好。你可以检查结果：

【讨论】：