为了账号安全,请及时绑定邮箱和手机立即绑定
关注
烟雨湿金戈

我写了一个翻页的,可是页面上的数字不跟着翻?怎么解

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>书本翻页效果</title>

  <style type="text/css">

    *{

      margin: 0;

      padding: 0;

      text-decoration: none;

    }

    .box1{

      -webkit-perspective: 800;

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

    }

    .box2{

      -webkit-transform-style: -webkit-preserve-3d;

      width: 200px;

      height: 200px;

      position: relative;

      left: 50%;

      margin-left: -100px;

      margin-top: 200px;

    }

    .page{

      width: 180px;

      height: 180px;

      padding: 10px;

      background-color: pink;

      -webkit-transition: -webkit-transform 2s linear;

      -webkit-transform-origin: left;

      color: lime;

      text-align: center;

      line-height: 180px;

      font-weight: bolder;

      font-size: 100px;

      margin: 0 auto;

      position: absolute;

    }

    .box3{

      width: 140px;

      margin: 0 auto;

    }

  </style>

</head>

<body>

  <div>

    <div>

      <div id="page1">6</div>

      <div id="page2">5</div>

      <div id="page3">4</div>

      <div id="page4">3</div>

      <div id="page5">2</div>

      <div id="page6">1</div>

    </div>

  </div>

  <div>

    <a href="javascript:prev()">上一页</a>&nbsp;&nbsp;

    <a href="javascript:next()">下一页</a>

  </div>

  <script type="text/javascript">

    var index=1;

    function prev(){

      if(index==1)

        return;

      index--;

      document.getElementById("page"+index).style.webkitTransform = "rotateY(180deg)";

    }

    function next(){

      if(index==6)

        return;

      document.getElementById("page"+index).style.webkitTransform = "rotateY(-180deg)";

      index++;

    }

  </script>

</body>

</html>



2016-10-05 源自:CSS3 3D 特效 3-4 401 浏览 1 回答

那个。你的.box和.box2还有.box3都没有引用啊。。所以没效果

2016-10-09
0

举报

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