HTML5 3D書(shū)本翻頁(yè)動(dòng)畫(huà)的實(shí)現(xiàn)示例
發(fā)布時(shí)間：2019-08-28 15:19:59 作者：前沿技術(shù) 
我要評(píng)論
我要評(píng)論這是一款十分炫酷的HTML5 3D書(shū)本翻頁(yè)動(dòng)畫(huà)，效果相對(duì)比較簡(jiǎn)單，拖拽鼠標(biāo)模擬用手翻頁(yè)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
這是一款十分炫酷的HTML5 3D書(shū)本翻頁(yè)動(dòng)畫(huà)，效果相對(duì)比較簡(jiǎn)單，拖拽鼠標(biāo)模擬用手翻頁(yè)，更漂亮的是翻頁(yè)過(guò)程中，呈現(xiàn)出逼真的3D立體效果。書(shū)本中的文字和圖片也會(huì)3D展示，非?？?。
HTML代碼
<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);
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
css transform 翻頁(yè)動(dòng)畫(huà)記錄的實(shí)現(xiàn)
這篇文章主要介紹了css transform 翻頁(yè)動(dòng)畫(huà)記錄的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2020-12-04
使用純CSS實(shí)現(xiàn)書(shū)籍3D翻頁(yè)效果的示例
這篇文章主要介紹了使用純CSS實(shí)現(xiàn)書(shū)籍3D翻頁(yè)效果的示例的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-19很酷的HTML5電子書(shū)翻頁(yè)動(dòng)畫(huà)特效
這篇文章主要介紹了很酷的HTML5電子書(shū)翻頁(yè)動(dòng)畫(huà)特效，這款HTML5翻頁(yè)動(dòng)畫(huà)可以用鼠標(biāo)拖動(dòng)頁(yè)面來(lái)模擬手動(dòng)翻頁(yè)的效果，也可以點(diǎn)擊書(shū)頁(yè)的邊框來(lái)快速翻頁(yè)，感興趣的小伙伴們可以參2016-02-25一個(gè)不錯(cuò)的html 打印代碼支持翻頁(yè)
這篇文章主要介紹了一個(gè)不錯(cuò)的html 打印代碼支持翻頁(yè)，非常實(shí)用，需要的朋友可以參考下2014-09-17css實(shí)現(xiàn)點(diǎn)擊滾動(dòng)翻頁(yè)的效果(無(wú)js)
滾動(dòng)翻頁(yè)這樣的效果想必各位在瀏覽網(wǎng)頁(yè)的時(shí)候都有見(jiàn)過(guò)吧，本文將使用純css實(shí)現(xiàn)這個(gè)效果，不含有任何的輔助代碼，感興趣的朋友可以參考下哈，希望可以幫助到你2013-03-22css3實(shí)現(xiàn)書(shū)本翻頁(yè)效果的示例代碼
這篇文章主要介紹了css3實(shí)現(xiàn)書(shū)本翻頁(yè)效果的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)2021-03-08
