动态翻书效果 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>动态翻书效果</title> <style> body { height: 100vh; font: 100%/1.25 Arial, Helvetica, sans-serif; color: #fff; perspective: 1000px; background: #444; background-image: linear-gradient(to bottom, #444, #999); } .book { width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -150px; } .book .page { width: 300px; height: 300px; padding: 1em; position: absolute; left: 0; top: 0; text-indent: 2em; } .book .front { background-color: #d93e2b; } .book .back { background-color: #fff; } .book .front-cover { cursor: move; transform-origin: 0 50%; /* transform:rotateY(-160deg) //可以利用这个看看旋转的效果 */ } .p3d { transform-style: preserve-3d; } .book .front-cover .back { background-image: url("https://preview.qiantucdn.com/58pic/35/01/38/55A58PICaUy8sV83Dd78m_PIC2018.jpg%21w1024_new_3072"); background-color: #d93e2b; background-repeat: no-repeat; background-size: cover; transform: translateZ(3px); } .book .back-cover .back { transform: translateZ(-3px); } .book .flip { transform: rotateY(180deg); } .book .shadow, .book .card { width: 196px; height: 132px; position: absolute; top: 60px; left: 60px; transform-origin: 0 100%; } .book .card { background: url("https://preview.qiantucdn.com/58pic/35/01/38/55A58PICaUy8sV83Dd78m_PIC2018.jpg%21w1024_new_3072"); background-color: #d93e2b; background-size: cover; } .book .shadow { background-color: rgba(0, 0, 0, 0.5); } </style> </head> <body> <div class="book p3d">  <div class="back-cover p3d"> <div class="page back flip"></div> <div class="page front p3d"> <div class="shadow"></div> <div class="card"></div> </div> </div>  <div class="front-cover p3d"> <div class="page front flip p3d"> <p>“大哥，我给你说。真正你要办事，不需要搞这么多人。搞得事的人，两个就可以哒。我和你两个人，两把刀，我看黄皮个砸种有些什么屌的。”缺牙齿把大哥两个字音的间隔拖得特别长，阴阳怪气的开口了。</p> </div> <div class="page back"></div> </div> </div> <script> let book = document.querySelector('.book'), leftPage = document.querySelector('.front-cover'), card = document.querySelector('.card'), shadow = document.querySelector('.shadow') let hold = false //鼠标是按住的状态 leftPage.onmousedown = function () { hold = true } window.addEventListener('mouseup', function () { //鼠标不一定在page身上松开可能在其他地方松开，所以在window身上设置监听事件 hold = false }) let clamp = function (val, min, max) { return Math.max(min, Math.min(val, max)) } window.onmousemove = function (event) { if (hold) { // console.log(event.pageX); var angle = clamp((window.innerWidth / 2 - event.pageX + 300) / 300 * -90, -180, 0) //300为书的宽度 //该angle公式中的值不固定，可以设置其他 // leftPage.style.transform='rotate('+angle+'deg)' leftPage.style.transform = <code>rotateY(${angle}deg)</code> card.style.transform = <code>rotateX(${angle / 2}deg)</code> shadow.style.transform = <code>skewX(${angle / 10}deg)</code> book.style.transform = <code>rotateX(${60 + angle / 8}deg)</code> } } </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 动态翻书效果