Safari和Chrome之间的Animate.css rotation3d问题

Question

我正在一个项目中，我有一个简单的rotate3d动画，其中这些图像将顺时针旋转200deg并停止。我遇到的问题是，在Chrome中它们将顺时针旋转，但是在Safari中它们将逆时针旋转...

有什么办法可以解决这个问题？我尝试使用-webkit-指定，但这会影响chrome和safari。

这是我的代码：

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.arrows {
  z-index: -99999;
}

.mid-nodes-wrapper:hover .arrows {
  animation-name: arrows;
}

@keyframes arrows {
  from {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, 200deg);
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    z-index: -99999;
  }
  to {
    transform-origin: center;
    transform: none;
    -webkit-transform: none;
    z-index: -99999;
  }
}

<div class="mid-nodes-wrapper">
  <img class="animated arrows" src="http://pipsum.com/435x310.jpg" />
  </div

很抱歉，我无法共享该页面以显示...很遗憾，这是带有“秘密”材料的那些项目之一。

编辑：调整后的代码可以更好地排除故障

Answer 1

有人说，Apple出于简约的考虑摆脱了办公室的时钟，这就是结果。我们可能永远不会知道。

同时，我们可以使用此替代方法来获得顺时针旋转：

  0% {
-     transform: rotate3d(0, 0, 0, 0deg);
+     transform: rotate3d(0, 0, 0, 90deg);
  }

  100% {
-     transform: rotate3d(0, 0, 1, 360deg);
+     transform: rotate3d(0, 0, 4, 90deg);
  }

使用某种模式匹配将其概括为任何旋转角度：该角度必须是严格小于180度的角度的倍数（以解决这种歧义）。例如，要达到200度，请使用4 * 50度（或5 * 40度，没关系）。