                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /CSS3 3D 特效

求老师解答改成翻书效果后出现问题数字都乱了！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#win{
   -moz-perspective:800px;
   -ms-perspective:800px;
   -webkit-perspective:800px;
   -moz-perspective-origin:50% 65%;
   -ms-perspective-origin:50% 65%;
   -webkit-perspective-origin:50% 65%;
   overflow:hidden;}
#pagecontent{
   width:400px;
   height:400px;
   margin:0 auto;
   -moz-transform-style:preserve-3d;
   -ms-transform-style:preserve-3d;
   -webkit-transform-style:preserve-3d;
   position:relative;
   }
.page{
   width:360px;
   height:360px;
   padding:20px;
   font-weight:bold;
   font-size:300px;
   color:#F00;
   background-color:#000;
   text-align:center;
   position:absolute;}
#page1{
   -moz-transform-origin:left;
   -ms-transform-origin:left;
   -webkit-transform-origin:left;
   -moz-transition:transform 1s linear;
   -ms-transition:transform 1s linear;
   -webkit-transition:transform 1s linear;}
#page2,#page3,#page4,#page5,#page6{
   -moz-transform-origin:left;
   -ms-transform-origin:left;
   -webkit-transform-origin:left;
   /*-moz-transform:rotateY(90deg);
   -ms-transform:rotateY(90deg);
   -webkit-transform:rotateY(90deg);*/
   -moz-transition:transform 1s linear;
   -ms-transition:transform 1s linear;
   -webkit-transition:transform 1s linear;}
#ope{
   text-align:center;
   margin-top:100px;}
</style>
<script>
var curNum=1;
function next(){
   if(curNum==6)
   {return;
   alert("已经是最后一页了！");}
   var curPage=document.getElementById("page"+curNum);
   curPage.style.moztransform="rotateY(-180deg)";
   curPage.style.transform="rotateY(-180deg)";
   curNum++;
   var nextPage=document.getElementById("page"+curNum);
   nextPage.style.transform="rotateY(-180deg)";
   }
function previous(){
   if(curNum==1)
   {return;
   alert("已经是最前一页了！");}
   /*var curPage=document.getElementById("page"+curNum);*/
   /*curPage.style.transform="rotateY(90deg)";*/
   curNum--;
   var prePage=document.getElementById("page"+curNum);
   prePage.style.transform="rotateY(0deg)";
   }
</script>
</head>

<body>
<div id="win">
   <div id="pagecontent">
      <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 id="ope">
      <input type="button" value="下一个" onclick="next()" />
      <input type="button" value="上一个" onclick="previous()" />
   </div>
</div>
</body>
</html>