實現3d翻頁
阿新 • • 發佈：2019-02-17
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition繪製翻頁效果</title> <style> .btn{ margin:40px; } #book{ background-color: black; margin: 40px; width: 400px; height: 200px; padding: 0; perspective: 800; transform-style: preserve-3d; -webkit-perspective: 800; -webkit-transform-style: -webkit-preserve-3d; } #page1{ position: absolute; width: 200px; height: 200px; background-color: grey; transform-origin: right center; transition: transform 1s linear; -webkit-transition: transform 1s linear; -webkit-transform-origin: right center; } #page2, #page3, #page4{ position: absolute; width: 200px; height: 200px; background-color: grey; transition: transform 1s linear; -webkit-transition: transform 1s linear; transform-origin: right center; -webkit-transform-origin: right center; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); } #left{ float: left; background-color: black; margin-left: 40px; width: 200px; height: 200px; padding: 0; overflow: hidden; perspective: 800; transform-style: preserve-3d; -webkit-perspective: 800; -webkit-transform-style: -webkit-preserve-3d; } #right{ float: left; background-color: black; width: 200px; height: 200px; padding: 0; overflow: hidden; perspective: 800; transform-style: preserve-3d; -webkit-perspective: 800; -webkit-transform-style: -webkit-preserve-3d; } #pagel1,#pagel2,#pagel3,#pagel4{ position: absolute; width: 158px; height: 158px; background-color: grey; padding: 20px; transform-origin: right center; transition: transform 1s linear; -webkit-transition: transform 1s linear; -webkit-transform-origin: right center; border: 1px solid red; } #pagel2,#pagel3,#pagel4{ transform: rotateY(180deg); -webkit-transform: rotateY(180deg); } #pager1,#pager2,#pager3,#pager4{ position: absolute; width: 158px; height: 158px; background-color: grey; padding: 20px; transition: transform 1s linear; -webkit-transition: transform 1s linear; transform-origin: left center; -webkit-transform-origin: left center; border: 1px solid red; } #pager1{ z-index: -10; } #pager2{ z-index: -20; } #pager3{ z-index: -30; } #pager4{ z-index: -40; } </style> </head> <body> <div id="book"> <div id="page1">1</div> <div id="page2">2</div> <div id="page3">3</div> <div id="page4">4</div> </div> <div class="btn"> <a href="javascript:prev()">上一頁</a> <a href="javascript:next()">下一頁</a> </div> <div id="left"> <div id="pagel1">第1頁</div> <div id="pagel2">第3頁</div> <div id="pagel3">第5頁</div> <div id="pagel4">第7頁</div> </div> <div id="right"> <div id="pager1">第2頁</div> <div id="pager2">第4頁</div> <div id="pager3">第6頁</div> <div id="pager4">第8頁</div> </div> <div style="clear:both;"></div> <div class="btn"> <a href="javascript:prev2()">上一頁</a> <a href="javascript:next2()">下一頁</a> </div> <script> var curIndex = 1; function prev(){ if(1==curIndex) return; var lPage = document.getElementById("page"+curIndex); var llPage = document.getElementById("page"+(curIndex-1)); var rPage = document.getElementById("page"+(curIndex+1)); if(llPage)llPage.style.zIndex = 100; if(rPage)rPage.style.zIndex = 0; lPage.style.transform = "rotateY(180deg)"; lPage.style.webkitTransform = "rotateY(180deg)"; curIndex--; } function next(){ if(4==curIndex) return; curIndex++; var lPage = document.getElementById("page"+curIndex); var rPage = document.getElementById("page"+(curIndex+1)); if(rPage)rPage.style.zIndex = 100; lPage.style.transform = "rotateY(0deg)"; lPage.style.webkitTransform = "rotateY(0deg)"; } var curPage = 1; function prev2(){ if(1===curPage) return; //左邊翻頁 var lPage = document.getElementById("pagel" + curPage); lPage.style.transform = "rotateY(180deg)"; lPage.style.webkitTransform = "rotateY(180deg)"; //右邊翻頁 var rPage = document.getElementById("pager" + (curPage-1)); rPage.style.transform = "rotateY(0deg)"; rPage.style.webkitTransform = "rotateY(0deg)"; curPage--; } function next2(){ if(4===curPage) return; //左邊翻頁 var lPage = document.getElementById("pagel" + (curPage+1)); lPage.style.transform = "rotateY(0deg)"; lPage.style.webkitTransform = "rotateY(0deg)"; //右邊翻頁 var rPage = document.getElementById("pager" + curPage); rPage.style.transform = "rotateY(-180deg)"; rPage.style.webkitTransform = "rotateY(-180deg)"; curPage++; } </script> </body> </html>