为什么我的实现不了3D翻转？？？

Question

  <style type="text/css">
#my3dspace{
  -webkit-perspective: 800px;
  -webkit-perspective-origin:50% 50%;
  overflow:hidden;
 }
 #pagegroup{
  width:400px;
  height:400px;
  margin:0 auto;
  
  -webkit-transform-style:preserve-3d;
  
  position:relative;
 }
 .page{
  width:360px;
  height:360px;
  padding:20px;
  background-color:black;
  color:white;
  font-weight:bold;
  font-size:360px;
  line-height:360px;
  text-align:center;
  position:absolute;
 }
 #page1{
  -webkit-transform-origin:bottom;
   -webkit-transition: -webkit-transform 1s linear;
  
 }
 #page2,#page3,#page4,#page5,#page6{
  -webkit-transform-origin:bottom;
  -webkit-transition: -webkit-transform 1s linear;
  -webkit-transform: rotateX(90deg);
 }
 #opp{
  
  text-align:center;
  margin:40px auto;
 }

    </style>   
 <script type="text/javascript">
function next(){
  if(curIndex == 6)
  return;
  var curPage=document.getElementById("page"+curIndex);
  curPage.style.webkitTransform="rotateX(-90deg)";
  
  curIndex++;
  var nextPage=document.getElementById("page"+curIndex);
  nextPage.style.webkitTransform="rotateX(0deg)";
  }  
 function prev(){
  if(curIndex == 1)
  return;
  var curPage=document.getElementById("page"+curIndex);
  curPage.style.webkitTransform="rotateX(90deg)";
  
  curIndex--;
  var prevPage=document.getElementById("page"+curIndex);
  prevPage.style.webkitTransform="rotateX(0deg)";
  }
   
    </script>

<div id="my3dspace">
 <div id="pagegroup">
     <div class="page" id="page1">1</div>
        <div class="page" id="page2">2</div>
        <div class="page" id="page3">3</div>
        <div class="page" id="page4">4</div>
        <div class="page" id="page5">5</div>
        <div class="page" id="page6">6</div>
     </div>
</div>      
<div id="opp">
 <input type="button" value="next" onClick="next()" />&nbsp<input type="button" value="prev" onClick="prev()" />
</div>

Answer 1

这种人就是老是复制别人的代码，报错信息都不看一下

Answer 2

 没有定义全局变量     var curIndex = 1;