为了账号安全,请及时绑定邮箱和手机立即绑定

为什么不翻页?求解答

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

      #my3dplace{

       -webkit-perspective:800px;

       -webkit-perspective-origin:50% 50%;

       overflow: hidden;/*创建3d场景*/


      }

      #pagegroup{

       width: 400px;

       height: 400px;

       margin: 0 auto;

       -webkit-transform-style:preserve-3d;/* -webkit-preserve-3d会显示最后一张5 */

       position: relative;/*不懂*/

      }

      .page{

       width: 360px;

       height: 360px;

            padding: 20px;/*加padding后不乱码*/

       background-color: black;

       color: white;/*前景色*/

       font-weight: bold;/*字体粗细 粗体*/

       font-size: 360px;/*字体大小*/

       line-height: 360px;/*行高*/

       text-align:center;

       position: absolute;

            }

      #page1{

       -webkit-transform-origin:bottom;/*设置旋转中心沿x轴*/

       -webkit-transition:-webkit-transform is linear;

       


      }

      #page2,  #page3,  #page4,  #page5,#page6{

           -webkit-transform-origin:bottom;

           -webkit-transition:-webkit-transform is linear;/*设置渐变样式*/

           -webkit-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)";

curIndex++;

var nextpage=document.getElementById("page"+curIndex);

nextpage.style.webkitTransform="rotateX(0deg)";                                             



}

function previous(){


}

</script>

</head>

<body>

<div id="my3dplace"><!-- /*搭建三维场景*/ -->

<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>

</div>

<div id="op">

<a href="javascript:next()">next</a>&nbsp;

<a href="javascript:previous()">previous</a>

</div>

</body>

</html>


2017-06-21 源自:CSS3 3D 特效 3-1 433 浏览 1 回答

那里是1s  你写成了is;  翻页那个块你没有加.page那个class  

2017-06-23
回复 0

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信