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

JS FIDDLE

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

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

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

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

我不能使用我的动画，直到我弄清楚这一点。这让我很伤心。 大声笑

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

Answer 1

您可以尝试将canvas元素在其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，因为它中有任何拼写错误，如果更正则会显示在顶部。

示例小提琴