<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三维</title>
<style>
#my3dspace{
-webkit-perspective:800;
-webkit-perspective-origin:50% 50%;
overflow:hidden;
}
#pagegroup{
width:500px;
height:500px;
margin:0 auto;
-webkit-transform-style:-webkit-preserve-3d;
position:relative;
}
.page{
width:400px;
height:400px;
padding:20px;
background-color:red;
color:white;
font-weight:bold;
font-size:400px;
line-height:400px;
text-align:center;
position:relative;
}
#page1{
-webkit-transform-origin:bottom;
-wedkit-transition:-webkit-transform 1s linear;
}
#page7,#page6,#page5,#page4,#page3,#page2{
-webkit-transform-origin:bottom;
-wedkit-transition:-webkit-transform 1s linear;
-wedkit-transform:rotateX(90deg);
}
#op{
text-align:center;
margin:40px auto;
}
</style><script type="text/javascript"> var curIndex = 1; function next(){ if(curIndex == 1) 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></head><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 class="page" id="page7">7</div> </div></div><div id="op"> <a href="javascript:next()">next</a> <a href="javascript:prev()">previous</a> </body></html>
