为什么 Safari 无法处理 CSS3 3D 变换？

Question

我创建了一个 3D 旋转立方体，它在 Chrome 和 Firefox 中运行良好。但是它在 Safari（桌面和移动）中根本没有动画。

我在 CSS 上使用 autoprefixer，所以那里应该没有问题，但是我似乎无法解决为什么我不能让它在 Safari 中设置动画。是否有一些我正在使用的 Safari 不支持的 CSS 规则？

这是我对整个立方体的了解：

.cube {
  position: relative;
  transform-style: preserve-3d;
  animation-name: rotate;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
    transform: rotateX(90deg) rotateY(90deg);
}

您可以在此处查看完整代码：

https://codepen.io/kkranzo/pen/PoEyKpz

Answer 1

我最终找到了问题所在。显然 Safari 不喜欢只有两个关键帧的动画。我继续在动画的 50% 处添加了以下内容，它现在可以在 Safari 上运行。我也更新了 Codepen 上的代码。

50% {
    transform: rotate3d(0, 1, 0, 180deg);
}

为什么 Safari 无法处理 CSS3 3D 变换？

Why can't Safari handle CSS3 3D transforms?

3d

safari

transform

cube