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

【问题标题】：Animate.css rotate3d issues between Safari and ChromeSafari 和 Chrome 之间的 Animate.css rotate3d 问题
【发布时间】：2023-03-24 23:35:01
【问题描述】：

我正在做一个项目，我有一个简单的小 rotate3d 动画，其中这些图像将顺时针旋转 200 度并停止。我遇到的问题是，在 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

抱歉，我无法分享要显示的页面...不幸的是，这是那些包含“秘密”材料的项目之一。

编辑：调整代码以获得更好的故障排除

【问题讨论】：

您可能希望在您的问题中发布重现此问题所需的最少 HTML，可能使用来自pipsum.com的图像
很抱歉。已编辑。

标签： css google-chrome safari css-animations

【解决方案1】：

有人说苹果为了极简主义而放弃了办公室里的时钟，这就是结果。我们可能永远不会知道。

与此同时，我们可以使用这个变通方法来获得顺时针旋转：

  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 度，没关系）。

【讨论】：