Javascript 在IOS设备上设置动画时，两个动画元素堆叠在一起，相互改变（z索引位置）？

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

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

我遇到的问题是画布烟雾动画改变了它的位置，硬币翻转动画在烟雾画布动画的后面和前面隐藏了它自己或它的一部分，就像它的z索引位置在翻转动画开始时改变一样

这只发生在Iphone和apple设备上。但是在android和桌面上也可以很好地工作。如果你移除画布，翻转动画就可以很好地工作，没有任何问题。。但是，如果画布在那里，一旦翻转动画开始，它就会覆盖翻转动画

我不能使用我的动画，直到我弄明白这一点。。这让我很难过。哈哈

非常感谢您的帮助！查看我的全部

---

您可以尝试将画布元素在其z轴上的三维空间中向后移动，以避免发生剪切。例如，将以下属性添加到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);
}

在上面的示例中，的数字-20000是任意的。在你找到一个更有用的价值之前，你可以试着使用它们，但这是一个不错的起点。它链接到设置，如果设置该设置，也会对z位置使用的值产生影响

使用带有-webkit前缀的变体可能可以做得很好，因为它只会影响Safari，但将来可能还需要不固定的变体

您还可以删除myCanvas的z索引，因为其中有一个打字错误，如果更正，if将出现在顶部

---

嘿，这是一部史诗般的作品，几乎成功了！然而，我注意到旋转部分周围的主环与硬币边缘的翻转部分略微重叠。就像掷硬币和烟雾动画一样。有什么想法吗？我试着用较高和较低的转换数来应用你的转换代码，但我认为我做得不对。为什么以及如何通过像素设置3d？你能把我链接到一个解释这一点的文档吗？@PortalP它链接到

透视图

属性的设置。我会为这些添加一个链接。非常感谢！上面说我可以在3小时内赏金。今天晚些时候我会这样做。我非常感谢你，肯！