黑松山资源网 Design By www.paidiu.com
这是一款十分炫酷的HTML5 3D书本翻页动画,效果相对比较简单,拖拽鼠标模拟用手翻页,更漂亮的是翻页过程中,呈现出逼真的3D立体效果。书本中的文字和图片也会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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- [电影原声带]黎允文《天将雄师》[FLAC+CUE]
- 曝NS继任机型已进入量产阶段:已花了30亿日元
- 不是Switch2?曝《马里奥惊奇》NS捆绑包即将公开
- 暖心任天堂!网友Switch维修返还时贴纸被完好保留
- 《国语老歌 经典对唱情歌 2CD》[WAV/分轨][1.1GB]
- 《刀郎 翻唱精选华语专辑 披着羊皮的狼 》[WAV+CUE][430MB]
- 《真的田震 中国乐坛红极一时的歌者 精品集》[WAV+CUE][300MB]
- 群星.1995-新滚石九大天王之情歌大全【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·纵夏欢唱【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·贺岁齐唱【滚石】【WAV+CUE】
- 黑神话悟空上品虫校尉精魄获取方法一览|上品虫校尉精魄收集攻略
- 《指环王:夏尔的传说》推迟至2025年初发行
- 黑神话悟空上品蝎太子精魄获取方法一览|上品蝎太子精魄收集攻略
- 银霞.1977-《台北66电影原声带》台湾复刻版[WAV+CUE]
- 银霞.1980-《你那好冷的小手》台湾珍藏纪念版[WAV+CUE]