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

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 中动画确实 'open' 像一本书的页面，但它看起来 'spin' 就好像浏览器正在尝试为 y 轴设置动画。

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

有什么解决方法可以让我在 IE/Edge 中正常工作吗？

Answer 1

在整理这个问题的 fiddle 时，我找到了部分答案，这看似简单。所以，我想我仍然 post 为那些像我一样尝试搜索它的人提供这个！

虽然我不完全确定为什么 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 上动画角度

Animating the angle only on a rotate3d in IE11/Edge

css

internet-explorer

cross-browser

css-transitions

css-transforms