Maybe,I can tell you the truth.

首先，我们在最外层的div中设置了属性-webkit-perspective-origin:50% 50%;这句话告诉我们我们在看id=pagegroup这块400px*400px“画布”（暂且叫他画布）时候，我们是从画布中心看着画布的，也就是说，当只有page6的时候，当我们设置page6为-webkit-transform:rotateX(90deg)时，我们是能够看到一个梯形的的page6，平躺着了XZ这个平面上。

其次，page6的z-index值比page1,2,3,4,5都大，（这而你需要了解z-index的含义，z-index的值越大，元素在Z轴上相交点的数值就越大，在屏幕上会呈现在z-index比他小的上面），这也就是说，即使page6平躺下去了，page1,2,3,4,5还是不能够挡着他的身影的，他仍然以一个梯形的形状躺在page1,2,3,4,5的身上，这也就是你说的为啥叠加在page1上面的原因。

最后，当然要提出解决这个bug的方案了，重点来咯。

      1，在最外层div中设置overflow：hidden；（保证page即使翻过了，超过pagegroup下边缘的时候也不会显示出来）。

      2，修改page2,3,4,5,6的初始X轴的旋转位置，改为-webkit-transform:rotateX(110deg)；当然还可以更大。

      3，修改javascript代码，

          var curPage=document.getElementById("page"+curIndex);

           curPage.style.webkitTransform="rotateX(110deg)";

这样就完成了，保证不会看到你说的叠加了。ALL rights reserved！如果有错误地方，欢迎老师、同学更正。万谢叩安。