<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #a{ -webkit-perspective:800; -webkit-perspective-origin:50% 50%; overflow: hidden; } #pagegroup{ width: 400px; height: 400px; margin: 0 auto; -webkit-transform-style:preserve-3d; position: relative; } .page{ width: 360px; height: 360px; padding: 20px; background: #000; color: #fff; font-weight: bold; font-size: 360px; line-height: 360px; 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); } </style> </head> <body> <div id="a"> <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:next()">next </a> <a href="javascript:perv()">perv</a> </div> <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 perv(){ 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)"; } </script> </body> </html>