JavaScript zindex rotation Safari桌面和iPad

我的程序在使用Chrome、Firefox和Opera的桌面上运行。它在我的安卓手机上也能用。我希望它能在iPad上工作。它不适用于桌面Safari或iPad上的Chrome，因此它是iPad上的Safari和Chrome

程序动态创建画布元素。在某个点上，某些元素在动画中旋转，然后在其他元素上重新定位。这涉及到使用JavaScript更改zIndex值。节目如下：

在代码执行旋转后，执行以下操作：

for (var ci=currentseg;ci<NoS;ci++) {
   c = strandCanvases[sB][ci];
   c.style.webkitTransform = "rotateY("+degree+"deg)";
   c.style.MozTransform = "rotateY("+degree+"deg)";
   c.style.msTransform = "rotateY("+degree+"deg)";
   c.style.OTransform = "rotateY("+degree+"deg)";
   c.style.transform = "rotateY("+degree+"deg)";
}

这样看来，改变桌面Safari、iPad Safari或Chrome上的zIndex值是行不通的

for(var i=0;i<NoSX;i++) {
   sAcanseg = strandCanvases[sAnow][segN+i];
   sBcanseg = strandCanvases[sBnow][segN+i];
    ...

   sBcanseg.style.zIndex = "100";
   sAcanseg.style.zIndex = "0";

}

有些元素是好的，有些是不好的

注意：以下内容在台式机、iPad和Android手机上确实可以正常工作：

正如所指出的，当3d转换可能由于以下原因而启用时，此z索引不起作用

可能的解决办法 是应用-webkit变换：rotateYANG_DEG translate3d0,0，Z_IDX变换，因此基本上将使用三维空间中的Z深度来定位元素

因此，在您的应用程序中，它应该类似于：

c.style.webkitTransform = "rotateY("+degree+"deg) translate3D(0,0, " + zValue + ")";

而且只适用于ipad

笔记 iPad上的Chrome使用与Safari相同的渲染引擎，因此这两种浏览器之间没有太大区别