HTML5 3D书本翻页动画的实现示例
前端  /  管理员 发布于 5年前   166
这是一款十分炫酷的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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..博主 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 @ mashrdn 多切换几个节点测试,免费ssr是没那么稳..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号