翻页效果小项目，贴上自己做的代码！
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻页效果</title>
<link rel="stylesheet" type="text/css" href="CSS/demo.css">
<script type="text/javascript" src="JS/demo.js"></script>
</body>
<div id="my3dspace">
<div id="pagegroup">
<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 id="op"><a href="javascript:prev()">上一页</a> <a href="javascript:next()">下一页</a></div>
</html>
CSS部分：
#my3dspace{-webkit-perspective:800px;-webkit-perspective-origin:50% 50%;overflow: hidden;}
#pagegroup{width: 400px;height: 400px;margin:0px auto;-webkit-transform-style:preserve-3d;position: relative;}
.page{width: 360px;height: 360px;padding:20px;background: black;color: white;position: absolute;font-weight: bold;font-size: 360px;line-height: 360px;text-align: center;}
#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);}
#op{text-align: center;margin:40px auto;font-size: 20px;}
#op a{text-decoration: none;}
#op a:hover{color: red;text-decoration: underline;}
JavaScript部分：
var curIndex=1;
function next(){
if(curIndex==6)
{
return;
}
else
{
var nextPage=document.getElementById("page"+curIndex).style.webkitTransform="rotateX(-90deg)";
curIndex++;
var curPage=document.getElementById("page"+curIndex).style.webkitTransform="rotateX(0deg)";
}
}
function prev(){
if(curIndex==1)
{
return;
}
var prevPage=document.getElementById("page"+curIndex).style.webkitTransform="rotateX(90deg)";
curIndex--;
var curPage=document.getElementById("page"+curIndex).style.webkitTransform="rotateX(0deg)";
}
