? <style type="text/css">#my3dspace{??-webkit-perspective: 800px;??-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-color:black;??color:white;??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);?}?#opp{????text-align:center;??margin:40px auto;?}??? </style>??? ?<script type="text/javascript">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><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="opp">?<input type="button" value="next" onClick="next()" />&nbsp<input type="button" value="prev" onClick="prev()" /></div>