9999热视频三级毛片AV区|日韩欧美精品狼友观看视频|av在线成人免费AA片|日韩三级AV电影|久久亚洲私人国产精品vA|亚洲无码卡一卡二卡三|手机在线免费看黄色片|婷婷尹人在线婷婷五月手机网|99爱在线播放|欧美成人色情视频品

這篇文章主要介紹了基于javascript html5實(shí)現(xiàn)翻書(shū)特效的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

這是一款十分炫酷的HTML5 3D書(shū)本翻頁(yè)動(dòng)畫(huà)，效果相對(duì)比較簡(jiǎn)單，拖拽鼠標(biāo)模擬用手翻頁(yè)，更漂亮的是翻頁(yè)過(guò)程中，呈現(xiàn)出逼真的3D立體效果。書(shū)本中的文字和圖片也會(huì)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>

CSS代碼

.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;

}

JavaScript代碼

(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);

以上就是HTML5 3D書(shū)本翻頁(yè)動(dòng)畫(huà)的示例代碼，希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。