CSS3动画-定位元素层级覆盖问题

       在之前写过一篇博客js-使用js生成10*10个带标号的div，关于如何使用js生成10*10的100个div。最近尝试着在这使用定位+循环生成的100个div上加上span并配合css3里的transform,相当于每一个div都是一个四个面的立方体，每一个面都是一整张背景图的一部分。但是出现了定位元素层级覆盖问题，如下图所示：

       从这张图片上，可以看到在这图片中心点的左侧，可以看到每个div内包含的立方体的左侧面和中心点下每个div所形成的立方体的上侧面
       原因有两个：1.因为是用定位排列的10*10个div,有定位就会有层级问题；2.默认情况下，perspective-origin的值为center center。
       从persective-originj角度入手解决，将persective-origin设置成了right bottom。理论上是一举解决了这个问题，但是在转动的时候，能够很清楚的看到左上角转动的角度不是90deg，立方体已经变形。所以不提倡修改persective-origin。
        从z-index角度入手解决，我们想要的是从最左侧到中心点，z-index递增。从中心点到最右侧，z-index递减。根据规律，可人为设置z-index。
       以下是以5个div作为找规律的示意图：

       为了方便找到规律，便将每一行递增10，此时，我们可以将z-index拆分为x-index和y-index。z-index处理js代码如下所示：

for(var i = 0; i < 100; i++) {                var x = i % 10;                var y = parseInt(i/10);                var xIndex = 0;                var yIndex = 0;                var zIndex = 0;                xIndex=5-Math.abs(x - 5);                yIndex=5-Math.abs(y - 5);                zIndex = yIndex * 10 + xIndex;                ......//样式和结构生成代码                }