CSS 动画 : 3D翻页动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>create effect of 3D</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } #my3d{ /* 加入hidden 避免对其他元素造成影响 */ overflow: hidden; perspective: 800px; perspective-origin: 50% 50%; } .page-group{ width: 400px; height: 400px; margin: 0 auto; position: relative; /* 规定渲染 */ transform-style:preserve-3d; } .page{ width: 360px; height: 360px; padding: 20px; display: flex; justify-content: center; align-items: center; background-color: #333; color:#fff; font-size: 360px; font-weight: bold; position: absolute; transition: transform 1s linear; } .page1{ transform-origin: bottom; } .page2,.page3,.page4,.page5,.page6{ transform-origin: bottom; transform: rotateX(90deg); } #op,.think{ display: grid; place-items: center; } </style> </head> <body> <div id="my3d"> <div class="page-group"> <div class="page page1">1</div> <div class="page page2">2</div> <div class="page page3">3</div> <div class="page page4">4</div> <div class="page page5">5</div> <div class="page page6">6</div> </div> </div> <div id="op"> <button onclick="next()">next</button> <button onclick="previous()">previous</button> </div> <br><br> <hr> <br><br> <div class="think"> <h4>思路</h4> <br> <p>page1一开始铺在屏幕上,其他的页面横向的铺在屏幕里面</p> </div> <script> let curIndex = 1; function next(){ if(curIndex==6){ return } let curPage = document.querySelector(".page"+curIndex); // 当前页面向前方 90° curPage.style.webkitTransform = "rotateX(-90deg)" curIndex++ // 下一个页面向前 90° let nextPage = document.querySelector(".page"+curIndex) nextPage.style.webkitTransform = "rotateX(0deg)" } function previous(){ if(curIndex==1){ return } let curPage = document.querySelector(".page"+curIndex); // 当前页面向前方 90° curPage.style.webkitTransform = "rotateX(90deg)" curIndex-- // 下一个页面向前 90° let nextPage = document.querySelector(".page"+curIndex) nextPage.style.webkitTransform = "rotateX(0deg)" } </script> </body> </html>