在IOS设备上制作动画时,2个相互叠加的动画元素会发生变化(z-index位置)？

Question

JS FIDDLE

我有2个动画元素.一个是简单的旋转脚本,它像硬币一样旋转徽标的中间部分. 

另一个动画是在中间部分翻转时看到的徽标背后的粒子画布烟雾动画.

我遇到的问题是画布烟雾动画改变了它的位置,硬币翻转动画落后于烟幕画面动画隐藏自身或其自身的一部分,就像翻转动画开始时几乎其z-index位置的变化...

这只发生在Iphone和苹果设备上.但在Android和桌面上工作正常.如果你删除画布,翻转动画效果很好而没有问题.但是如果画布在那里它会在翻转动画开始时掩盖翻转动画. 

我不能使用我的动画,直到我弄明白这一点.这让我很伤心.大声笑

任何帮助深表感谢!看看我的完整JS FIDDLE

Answer 1

您可以尝试将画布元素移回到其 z 轴上的 3D 空间中，以避免发生剪裁。例如，将以下属性添加到 CSS 规则中：

.animateVSS{
  /* ... */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

#myCanvas{
  /* ... */
  -webkit-transform: translateZ(-20000px) rotateY(0.1deg);
  transform: translateZ(-20000px) rotateY(0.1deg);
}

在上面的示例中，translateZ的数字 -20000是任意的。尝试使用它们，直到找到更有用的值，但这是一个不错的起点。它与透视设置相关联，如果设置该设置也会影响 z 位置使用的值。

您可能可以很好地使用 -webkit- 前缀的变体，因为它只影响 Safari，但将来可能也需要无前缀的变体。

您还可以删除 myCanvas 的 z-index，因为其中无论如何都有拼写错误，如果更正的话，它会出现在顶部。

小提琴示例