不能翻頁
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3d翻頁</title>
<style>
#allpage{-webkit-perspective:1000px;-webkit-perspective-origin:50% 50%; overflow:hidden;}
.pagebox{ width:300px; height:300px; -webkit-transform-style:preserve-3d; margin:auto; position:relative;}
.page{ width:280px; height:280px; padding:10px; background-color:#000; color:#fff; font-size:280px; line-height:280px; text-align:center; position:absolute;}
#page1{-webkit-transform-origin:bottom; -webkit-transition:-webkit-transform 1s linear;}
#page2,#page3,#page4,#page5,#page6{-webkit-transform-origin:bottom; -webkit-transition:-webkit-transform 1s linear; -webkit-transform:rotateX(90deg);}
.btn{ text-align:center; margin:auto;}
<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 prev(){
? ? ? ? ? ? if( curIndex == 1 )
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? var curPage = document.getElementById("page"+curIndex);
? ? ? ? ? ? curPage.style.webkitTransform = "rotateX(90deg)";
? ? ? ? ? ? curIndex --;
? ? ? ? ? ? var prevPage = document.getElementById("page"+curIndex);
? ? ? ? ? ? prevPage.style.webkitTransform = "rotateX(0deg)";
? ? ? ? }
? ? </script>
</style>
</head>
<body>
<div id="allpage">
<div class="pagebox">
? ? ? ? <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 class="btn"><a href="javascript:next()">next</a> <a href="javascript:prev()">previous</a></div>
</body>
</html>
2016-04-13
js寫在style外面............