Question

我发现了一个非常奇怪的行为（在Chrome中找到它出现的确切情况并不容易，但我现在至少能够一致地重现它）。

如果我的元素的转换样式属性包含translateX，Y或Z以及转换属性的转换，那么当我对它应用90度旋转时，在转换完成之前我设置了旋转到180度，它突然切换方向。它与-90相同，后跟-180。

您可以在此处找到最小的演示：https://jsfiddle.net/gy313qon/5/
或者作为一个html：

<html>
<head>
  <style>
    .translated {
      transform: translateX(0px);
    }

    div {
      width: 100px;
      height: 200px;

      border: solid black 1px;

      transition: transform 2000ms;
    }
  </style>
</head>
<body>
  <div class="translated" id="box"></div>
  <script>
    const box = document.getElementById('box')

    setTimeout(() => { box.style.transform = 'rotate(90deg)' }, 0)
    setTimeout(() => { box.style.transform = 'rotate(180deg)' }, 1000)
  </script>
</body>
</html>

如果删除翻译或将其更改为比例，则按预期工作。此外，我也在Microsoft Edge中尝试过，我认为没有问题。这是Chrome的已知问题吗？我发现它在Canary构建中也是如此。

编辑：有一些非常混乱的事情正在发生。我刚刚测试了Joseph Marikle的评论，它似乎在Chrome中使用（90 =＆gt; -180）以及（-90 =＆gt; 180），但在Edge（-90 =＆gt; 180）中它做了它应该做的事情（回头），但是（90 => -180）继续。 O.o

编辑2 ：似乎将初始“旋转（0deg）”放入元素的默认样式可以防止这种毛刺行为，但我仍然希望看到某种解释或者承认是一个错误。

在Chrome中转换期间设置转换时，CSS旋转会更改方向

0 个答案: