绕Y轴旋转翻页效果有问题-慕课网

绕Y轴旋转翻页效果有问题

来源：3-2 JS部分

Helianthuserin

2016-02-22 14:37

为什么改成绕Y轴旋转，翻页的时候第一页卡在那里？不是已经绕Y轴转了90度，应该看不到才对啊.....麻烦大神看下代码。

<!DOCTYPE html>
 <html>
 <head>
  <meta charset="UTF-8">
  <title>3D Calendar</title>
  <style>
     #my3dspace{
      -webkit-perspective:800;
      -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;
      color:white;
      background-color: black;
         font-weight:bold;
        font-size:360px;
        line-height:360px;
        text-align:center;

       position:absolute;
     }
     
      
     #page1{
       -webkit-transform-origin:left;
       -webkit-transition:-webkit-transform 1s linear;
     }
     #page2,#page3,#page4,#page5,#page6,#page7{
   
         -webkit-transform-origin:left;
            -webkit-transition:-webkit-transform 1s linear;
            -webkit-transform:rotateY(90deg);
     }


     .operation{
      text-align:center;
      margin:40px auto;
     }
  </style>

  <script type="text/javascript">

  var curIndex=1;

  function next(){
    if(curIndex==7)
     return;
      var curPage=document.getElementById("page"+curIndex);
      curPage.style.webkitTransform="rotateY(-90deg)";
      

      curIndex++;
      var nextPage=document.getElementById("page"+curIndex);
      nextPage.style.webkitTransform="rotateY(0deg)";
  }
 
  function previous(){
  if(curIndex==1)
  return;
  var curPage=document.getElementById("page"+curIndex);
      curPage.style.webkitTransform="rotateY(90deg)";
      
      curIndex--;
      var nextPage=document.getElementById("page"+curIndex);
      nextPage.style.webkitTransform="rotateY(0deg)";

  }

  </script>

 </head>
 <body>
  <div id="my3dspace">
  <div id="pagegroup">
   <div id="page1">1</div>
            <div id="page2">2</div>
            <div id="page3">3</div>
            <div id="page4">4</div>
            <div id="page5">5</div>
            <div id="page6">6</div>
            <div id="page7">7</div>
  </div>
  </div>

  <div>
  <a href="javascript:previous()">previous</a> <a href="javascript:next()">next</a>
  </div>
 </body>
 </html>

写回答关注

1回答

Helianthuserin

2016-02-22 14:48:02
我自己试了一下，把next函数里面对当前页翻转的角度改成向外76度（原来是90）左右就不会显示翻过去的那一页，请问这是为什么？
```
function next(){
 	  if(curIndex==7)
 	  	return;
      var curPage=document.getElementById("page"+curIndex);
      curPage.style.webkitTransform="rotateY(-76deg)";
```
0 0

CSS3 3D 特效

使用CSS3当中的属性，创建真实可用的三维效果

78565 学习 · 436 问题

查看课程

相似问题

翻页效果源码

回答 1

3d翻页效果js代码相关问题

回答 2

到底是旋转角度还是旋转后与X轴的夹角

回答 2

旋转的问题

回答 1

页与页之间翻转

回答 3

打开慕课网App查看更多内容