Question

我无法弄清楚如何使用rotate3d()设置角度变化的动画，以便它可以在IE11和Edge上运行。

以下按照Chrome和Firefox中的预期方式工作，因为它看起来有点像书籍的开头页面：

<div class="canvas">
  <div class="page">
    This is the content on the page.
  </div>
</div>

.canvas { perspective: 1000px; }

.page {
  transform: rotate3d(0, 1, 0, -65deg);
  transform-origin: 0 50%;
  transition: transform 1s;
}

  .page.opening {
    transform: rotate3d(0, 1, 0, -125deg);
  }

Here's a fiddle通过一些额外的样式展示了上述内容，使其可见。

因此，虽然这适用于Chrome和Firefox，但在IE11和Edge中，动画确实会打开＆＃39;就像一本书的页面一样，但它也似乎是“旋转”。好像浏览器试图为y轴设置动画。

据我所知，IE / Edge不应该这样做，因为y轴在这两种状态之间不会发生变化。

我是否可以使用解决方法在IE / Edge中正常工作？

Answer 1

在整理这个问题的小提琴时，我遇到了一个部分答案，这看似简单。所以，我认为我仍然会为那些尝试像我一样搜索它的人发布此内容！

虽然我不完全确定为什么IE / Edge仍然会像Chrome和Firefox那样为每个轴设置动画，但在这种情况下，还有真正的简单解决方案：因为轴保持不变，你根本不需要使用rotate3d()。

所以，在这种情况下：

transform: rotate3d(0, 1, 0, -65deg);

可以简单地改为：

transform: rotateY(-65deg);

IE / Edge将仅为旋转而不是轴设置动画 - 正如您所期望的那样。

Here's an updated fiddle，适用于Chrome / Firefox / IE11 / Edge。

仅在IE11 / Edge中的rotate3d上设置角度动画

1 个答案: