我寫了一個(gè)翻頁(yè)的，可是頁(yè)面上的數(shù)字不跟著翻？怎么解
<!DOCTYPE html>
<html>
<head>
? <meta charset="UTF-8">
? <title>書本翻頁(yè)效果</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()">上一頁(yè)</a>
? ? <a href="javascript:next()">下一頁(yè)</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-09
那個(gè)。你的.box和.box2還有.box3都沒有引用啊。。所以沒效果