不能翻页
qq_凌空_4
2016-04-13 17:03
<!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>
1回答
-
- qq_爱吃饺子_0
- 2016-04-13 18:13:09
js写在style外面............
CSS3 3D 特效
78572 学习 · 425 问题
相似问题