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

【问题标题】：Animating the angle only on a rotate3d in IE11/Edge仅在 IE11/Edge 中的 rotate3d 上为角度设置动画
【发布时间】：2023-04-01 03:35:01
【问题描述】：

我无法弄清楚如何使用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 中，动画确实像书页一样“打开”，但它也似乎在“旋转”，就好像浏览器正在尝试为 y 轴设置动画一样。

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

是否有一种解决方法可以让我在 IE/Edge 中正常工作？

【问题讨论】：

标签： css internet-explorer cross-browser css-transitions css-transforms

【解决方案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。

【讨论】：