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

Question

JS FIDDLE

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

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

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

这只发生在 Iphone和Apple设备上。但在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是任意的。与它们一起玩，直到找到更有用的值，但这是一个很好的起点。它与perspective设置相关联，如果设置，也会对z位置使用的值产生影响。

使用-webkit-前缀变种可能会很好，因为它只影响Safari，但是对于将来可能也需要没有前缀的。

你也可以删除myCanvas的z-index，因为它中有任何拼写错误，如果更正则会出现错误。

Example fiddle