JS FIDDLE

I have 2 animated elements. One is a simple rotation script which rotates the middle portion of the logo like a coin.

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

The other animation is the particles canvas smoke animation behind the logo that you see while the middle section is flipping.

另一个动画是粒子画布烟雾动画背后的标志，当中间部分翻转。

The problem i have is the canvas smoke animation changes its position and the coin flipping animation goes behind and in front of the smoke canvas animation hiding itself or part of itself like almost its z-index position changes when the flipping animation starts...

我遇到的问题是画布烟雾动画改变了它的位置抛硬币动画在烟雾画布动画的后面和前面隐藏着它自己或者它的一部分当翻转动画开始时它的z索引位置几乎改变了…

This only happens on Iphone and apple devices. but works fine on android and desktop. If you remove the canvas the flipping animation works great with no issue.. But if the canvas is there it covers up the flip animation once the flip animation begins.

这只发生在Iphone和苹果设备上。但在android和桌面系统上运行良好。如果你移除了画布，翻转动画效果很好。但是如果画布在那里，它就会在翻转动画开始时覆盖翻转动画。

I cant use my animation until i figure this out though.. Which is making me sad. lol

我不能用我的动画，除非我想出来。这让我很伤心。哈哈

Any help is much appreciated! Check out my full JS FIDDLE

非常感谢您的帮助!看看我的全套JS提琴

1 个解决方案

#1

You can try moving the canvas element back in 3D space on its z-axis to avoid the clipping that occurs. For example, add these properties to the CSS rules:

您可以尝试在其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);
}

The numbers -20000 for translateZ is arbitrary in the example above. Play around with them until you find a more useful value, but this is a OK starting point. It's linked to the perspective setting which if set would also have an effect on what value is used for the z-position.

在上面的示例中，translateZ的数字-20000是任意的。在找到一个更有用的值之前，先考虑它们，但这是一个不错的起点。它链接到透视图设置，如果设置，也会影响z位置的值。

You can probably do fine with use the -webkit- prefixed variants as it only affects Safari, but for future it may be need for the unprefixed as well.

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

You can also remove the z-index for myCanvas as there is anyways a typo in it, and if corrected if will come on top.

您还可以删除myCanvas的z索引，因为其中无论如何都有一个错码，如果进行了更正，则if将出现在上面。

Example fiddle

例如小提琴

#1