基于javascript html5实现3D翻书特效


Posted in Javascript onMarch 14, 2016

这是一款十分炫酷的HTML5 3D书本翻页动画,效果相对比较简单,拖拽鼠标模拟用手翻页,更漂亮的是翻页过程中,呈现出逼真的3D立体效果。书本中的文字和图片也会3D展示,非常酷。

基于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>

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书本翻页动画的示例代码,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 文档的编码问题解决
Mar 01 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
生成二维码方法汇总
Dec 26 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
php基于redis处理session的方法
Mar 14 #Javascript
使用javascript插入样式
Mar 14 #Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
Mar 14 #Javascript
javascript实现数组去重的多种方法
Mar 14 #Javascript
javascript实现PC网页里的拖拽效果
Mar 14 #Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 #Javascript
node模块机制与异步处理详解
Mar 13 #Javascript
You might like
PHP网站基础优化方法小结
2008/09/29 PHP
php 破解防盗链图片函数
2008/12/09 PHP
php创建sprite
2014/02/11 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
python文件操作之目录遍历实例分析
2015/05/20 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
python3实现单目标粒子群算法
2019/11/14 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
linux 下selenium chrome使用详解
2020/04/02 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
教师自荐书
2013/10/08 职场文书
单位单身证明范本
2014/01/11 职场文书
教师求职自荐信
2014/03/09 职场文书
会计人员岗位职责
2014/03/19 职场文书
合伙协议书
2014/04/23 职场文书
中学推普周活动总结
2015/05/07 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers