Question

我正在进行一个项目，我有一个简单的小旋转3D动画，这些图像将顺时针旋转200度并停止。我遇到的问题是，在Chrome中他们会顺时针旋转，但在Safari中他们会逆时针旋转......

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

这是我的代码：

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

抱歉，我无法分享要显示的页面...不幸的是，这是其中一个带有＆＃34;秘密＆＃34;材料

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

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度，不要紧）。

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

1 个答案: