首页 / 脚本样式 / JavaScript / 基于javascript html5实现3D翻书特效

在线演示 源码下载
HTML代码

<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="dino"></div> </div> </div> <div class="front-cover p3d"> <div class="page front flip p3d"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum nisl quis nulla eleifend dignissim. Curabitur varius lobortis tincidunt. Maecenas gravida, nulla quis luctus imperdiet, ipsum nibh consectetur ante, in sodales massa tortor eget neque. Donec porta ligula massa, id sagittis est. Ut nisl tellus, faucibus nec feugiat ut, laoreet iaculis felis. Suspendisse ultrices mauris vel tellus suscipit commodo. Integer vitae tortor erat. Pellentesque non tempor nisi.</p> </div> <div class="page back"></div> </div></div>

.book { width: 300px; height: 300px; margin-top: -150px; position: absolute; left: 50%; top: 50%; -webkit-transform: rotateX（60deg）; -moz-transform: rotateX（60deg）; -ms-transform: rotateX（60deg）; -o-transform: rotateX（60deg）; transform: rotateX（60deg）; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}.page { width: 300px; height: 300px; padding: 1em; position: absolute; left: 0; top: 0; text-indent: 2em;}.front { background-color: #d93e2b;}.back { background-color: #fff;}.front-cover { cursor: move; -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: rotateY（0deg）; -moz-transform: rotateY（0deg）; -ms-transform: rotateY（0deg）; -o-transform: rotateY（0deg）; transform: rotateY（0deg）;}.front-cover .back { background-image: url（mdn.png）; background-repeat: no-repeat; background-position: 50% 50%; -webkit-transform: translateZ（3px）; -moz-transform: translateZ（3px）; -ms-transform: translateZ（3px）; -o-transform: translateZ（3px）; transform: translateZ（3px）;}.back-cover .back { -webkit-transform: translateZ（-3px）; -moz-transform: translateZ（-3px）; -ms-transform: translateZ（-3px）; -o-transform: translateZ（-3px）; transform: translateZ（-3px）; }.p3d { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d;}.flip { -webkit-transform: rotateY（180deg）; -moz-transform: rotateY（180deg）; -ms-transform: rotateY（180deg）; -o-transform: rotateY（180deg）; transform: rotateY（180deg）;}.dino,.shadow { width: 196px; height: 132px; position: absolute; left: 60px; top: 60px; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%;}.dino { background: url（dino.png） no-repeat;}.shadow { background: url（shadow.png） no-repeat;}

（function （window, document） { var prefixes = ["Webkit", "Moz", "ms", "O", ""], book = document.querySelectorAll（".book"）[0], page = document.querySelectorAll（".front-cover"）[0], dino = document.querySelectorAll（".dino"）[0], shadow = document.querySelectorAll（".shadow"）[0], hold = false, centerPoint = window.innerWidth / 2, pageSize = 300, clamp = function （val, min, max） { return Math.max（min, Math.min（val, max））; }; page.onmousedown = function （） { hold = true; }; window.onmouseup = function （） { if （hold） { hold = false; } }; window.onresize = function （） { centerPoint = window.innerWidth / 2; }; window.onmousemove = function （evt） { if （！hold） { return; } var angle = clamp（（centerPoint - evt.pageX + pageSize） / pageSize * -90, -180, 0）, i, j; for （i = 0, j = prefixes.length; i < j; i++） { book.style[prefixes[i] + "Transform"] = "rotateX（" + （60 + angle / 8） + "deg）"; page.style[prefixes[i] + "Transform"] = "rotateY（" + angle + "deg）"; dino.style[prefixes[i] + "Transform"] = "rotateX（" + （angle / 2） + "deg）"; shadow.style[prefixes[i] + "Transform"] = "translateZ（1px） skewX（" + （angle / 8） + "deg）"; } };}）（window, document）;