为什么我的不能3D翻页，求大神解救-慕课网

为什么我的不能3D翻页，求大神解救

来源：3-2 JS部分

weixin_慕娘0158064

2019-05-04 21:39

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三维</title>
<style>
   #my3dspace{
    -webkit-perspective:800;
    -webkit-perspective-origin:50% 50%;
    overflow:hidden;
    }
   #pagegroup{
    width:500px;
    height:500px;
    margin:0 auto;
    
    -webkit-transform-style:-webkit-preserve-3d;
    
    position:relative;
    }
 .page{
  width:400px;
  height:400px;
  padding:20px;
  background-color:red;
  
  color:white;
  
  font-weight:bold;
  font-size:400px;
  line-height:400px;
  text-align:center;
  
  position:relative;
  }   
 #page1{
  -webkit-transform-origin:bottom;
  -wedkit-transition:-webkit-transform 1s linear;
  }
 #page7,#page6,#page5,#page4,#page3,#page2{
  -webkit-transform-origin:bottom;
  -wedkit-transition:-webkit-transform 1s linear;
  -wedkit-transform:rotateX(90deg);
  } 
 #op{
  text-align:center;
  margin:40px auto;
  }  
</style><script type="text/javascript">    var curIndex = 1; function next(){  if(curIndex == 1)     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></head><body><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 class="page" id="page7">7</div>   </div></div><div id="op">   <a href="javascript:next()">next</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:prev()">previous</a>&nbsp;&nbsp;&nbsp;      </body></html>

写回答关注