<html><head><title></title><style>#my3dspace{-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-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);}#op{text-align:center;margin: 40px auto;}</style><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></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></div><div id="op"><a href="javascript:next()">next</a> <a href="javascript:prev()">previous</a></div></body></html>
這是一個(gè)3d翻頁(yè)效果?？床欢锩鎝osition：relative；和position：absolute；的作用？
qq_獨(dú)坐一隅_0
2016-09-12 21:18:37
