<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css"> #one{ -webkit-perspective: 800; -webkit-perspective-origin: 50% 50%; overflow: hidden; } #two{ width: 400px; height: 400px; margin: 0px auto; -webkit-transform-style: preserve-3d; position: relative; } .page{ width: 360px; height: 360px; padding: 20px; background: #000000; color: aliceblue; font-size: 320px; font-weight: bold; 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: 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="one"> <div id="two"> <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()">pervious</a></div></body></html>
- 1 回答
- 0 关注
- 1098 浏览
添加回答
举报
0/150
提交
取消