问答详情
源自：3-2 JS部分

为什么按老师说的没什么效果呢，望大神指点

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#my3dspace {
    -webkit-perspective:800px;
    -moz-perspective:800px;
    -ms-perspective:800px;
    -o-perspective:800px;
    perspective:800px;
    -webkit-perspective-origin:50% 50%;
    -moz-perspective-origin:50% 50%;
    -ms-perspective-origin:50% 50%;
    -o-perspective-origin:50% 50%;
    perspective-origin:50% 50%;
    overflow:hidden;}
#pagegroup{
    width:400px;
    height:400px;
    margin:0 auto;
    position:relative;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;    
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d;
    }
.page{
    width:360px;
    height:360px;
    padding:20px;
    background-color:#000;
    color:#FFF;
    font-weight:bold;
    font-size:360px;
    line-height:360px;
    text-align:center;
    position:absolute;
    }
#page1{
    -webkit-transform-origin:bottom;
    -moz-transform-origin:bottom;
    -ms-transform-origin:bottom;
    -o-transform-origin:bottom;
    transform-origin:bottom;
    -webkit-transition:-webkit-transform 1s linear;
    -moz-transition:-moz-transform 1s linear;
    -ms-transition:-ms-transform 1s linear;
    -o-transition:-o-transform 1s linear;
    transition:transform 1s linear;
    }
#page2,#page3,#page4,#page5,#page6{
    -webkit-transform-origin:bottom;
    -moz-transform-origin:bottom;
    -ms-transform-origin:bottom;
    -o-transform-origin:bottom;
    transform-origin:bottom;
    -webkit-transition:-webkit-transform 1s linear;
    -moz-transition:-moz-transform 1s linear;
    -ms-transition:-ms-transform 1s linear;
    -o-transition:-o-transform 1s linear;
    transition:transform 1s linear;
    -webkit-transform:rotateX(90deg);
    -moz-transform:rotateX(90deg);
    -ms-transform:rotateX(90deg);
    -o-transform:rotateX(90deg);
    transform:rotateX(90deg);    }
#op{
    text-align:center;
    margin:40px auto;}
</style>
<script type="text/javascript">
   var curIndex=1;
   function next(){
       if(curIndex==6){
        return;}
       var curPage=document.getElementById("page"+curIndex);
       curPage.style.webkitTransform="rotateX(-90deg)";
       curPage.style.mozwebkitTransform="rotateX(-90deg)";
       curPage.style.mswebkitTransform="rotateX(-90deg)";
       curPage.style.owebkitTransform="rotateX(-90deg)";
       curPage.style.Transform="rotateX(-90deg)";
       curIndex ++;
       var nextPage=document.getElementById("page"+curIndex);
       nextPage.style.webkitTransform="rotateX(0deg)";
       nextPage.style.mozTransform="rotateX(0deg)";
       nextPage.style.msTransform="rotateX(0deg)";
       nextPage.style.oTransform="rotateX(0deg)";
       nextPage.style.Transform="rotateX(0deg)";
      }
  function prev(){
       if(curIndex==1){
        return;}
       var curPage=document.getElementById("page"+curIndex);
       curIndex.style.webkitTransform="rotateX(90deg)";
       curIndex.style.mozTransform="rotateX(90deg)";
       curIndex.style.msTransform="rotateX(90deg)";
       curIndex.style.oTransform="rotateX(90deg)";
       curIndex.style.Transform="rotateX(90deg)";
       curIndex --;
       var prevPage=document.getElementById("page"+curIndex);
       prevPage.style.webkitTransform="rotateX(0deg)";
       prevPage.style.mozTransform="rotateX(0deg)";
       prevPage.style.msTransform="rotateX(0deg)";
       prevPage.style.oTransform="rotateX(0deg)";
       prevPage.style.Transform="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>
</div>
<div id="op">
 <a href="javascript:next()">next</a>&nbsp;<a href="javascript:prev()">previous</a>
 </div>
</body>
</html>

提问者：啦啦啦123 2015-02-03 17:18

个回答

  • 鱿鱼
    2015-03-06 16:53:11

    在各个浏览器上试了一下，其实可以不添加前缀的

    0
  • derrick9006
    2015-02-12 00:36:03

     简单地说就是在prev()误把curPage.style.webkitTransform="rotateX(90deg)";写成curIndex.style.webkitTransform="rotateX(90deg)";

    0
  • derrick9006
    2015-02-12 00:31:11

    希望您满意此答案

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#my3dspace {
    -webkit-perspective:800px;
    -moz-perspective:800px;
    -ms-perspective:800px;
    -o-perspective:800px;
    perspective:800px;
    -webkit-perspective-origin:50% 50%;
    -moz-perspective-origin:50% 50%;
    -ms-perspective-origin:50% 50%;
    -o-perspective-origin:50% 50%;
    perspective-origin:50% 50%;
    overflow:hidden;}
#pagegroup{
    width:400px;
    height:400px;
    margin:0 auto;
    position:relative;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;    
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d;
    }
.page{
    width:360px;
    height:360px;
    padding:20px;
    background-color:#000;
    color:#FFF;
    font-weight:bold;
    font-size:360px;
    line-height:360px;
    text-align:center;
    position:absolute;
    }
#page1{
    -webkit-transform-origin:bottom;
    -moz-transform-origin:bottom;
    -ms-transform-origin:bottom;
    -o-transform-origin:bottom;
    transform-origin:bottom;
    -webkit-transition:-webkit-transform 1s linear;
    -moz-transition:-moz-transform 1s linear;
    -ms-transition:-ms-transform 1s linear;
    -o-transition:-o-transform 1s linear;
    transition:transform 1s linear;
    }
#page2,#page3,#page4,#page5,#page6{
    -webkit-transform-origin:bottom;
    -moz-transform-origin:bottom;
    -ms-transform-origin:bottom;
    -o-transform-origin:bottom;
    transform-origin:bottom;
    -webkit-transition:-webkit-transform 1s linear;
    -moz-transition:-moz-transform 1s linear;
    -ms-transition:-ms-transform 1s linear;
    -o-transition:-o-transform 1s linear;
    transition:transform 1s linear;
    -webkit-transform:rotateX(90deg);
    -moz-transform:rotateX(90deg);
    -ms-transform:rotateX(90deg);
    -o-transform:rotateX(90deg);
    transform:rotateX(90deg);    }
#op{
    text-align:center;
    margin:40px auto;}
</style>
<script type="text/javascript">
   var curIndex=1;
   function next(){
       if(curIndex==6){
        return;}
       var curPage=document.getElementById("page"+curIndex);
       curPage.style.webkitTransform="rotateX(-90deg)";   
	   curPage.style.mozwebkitTransform="rotateX(-90deg)";
       curPage.style.mswebkitTransform="rotateX(-90deg)";
       curPage.style.owebkitTransform="rotateX(-90deg)";
       curPage.style.Transform="rotateX(-90deg)";	   
       curIndex ++;
       var nextPage=document.getElementById("page"+curIndex);
       nextPage.style.webkitTransform="rotateX(0deg)";
	   nextPage.style.mozwebkitTransform="rotateX(0deg)";
       nextPage.style.mswebkitTransform="rotateX(0deg)";
       nextPage.style.owebkitTransform="rotateX(0deg)";
       nextPage.style.Transform="rotateX(0deg)";	   
      }
  function prev(){    
       if(curIndex==1){
        return;}
       var curPage=document.getElementById("page"+curIndex);	   
       curPage.style.webkitTransform="rotateX(90deg)";  
	   curPage.style.mozwebkitTransform="rotateX(90deg)";
       curPage.style.mswebkitTransform="rotateX(90deg)";
       curPage.style.owebkitTransform="rotateX(90deg)";
       curPage.style.Transform="rotateX(90deg)";	   
       curIndex--;
       var nextPage=document.getElementById("page"+curIndex);
       nextPage.style.webkitTransform="rotateX(0deg)"; 
	   nextPage.style.mozwebkitTransform="rotateX(0deg)";
       nextPage.style.mswebkitTransform="rotateX(0deg)";
       nextPage.style.owebkitTransform="rotateX(0deg)";
       nextPage.style.Transform="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>
</div>
<div id="op">
 &nbsp;<a href="javascript:prev()">previous</a>&nbsp;<a href="javascript:next()">next</a>
 </div>
</body>
</html>


    0