基于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 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
jQuery中:not选择器用法实例
Dec 30 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
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 MYSQL中插入当前时间
2008/04/06 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
python二分法实现实例
2013/11/21 Python
django ajax json的实例代码
2018/05/29 Python
Flask框架信号用法实例分析
2018/07/24 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
windows下python安装pip方法详解
2020/02/10 Python
python处理写入数据代码讲解
2020/10/22 Python
苹果音乐订阅:Apple Music
2018/08/02 全球购物
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
.net软件工程师面试题
2015/03/31 面试题
渡河少年教学反思
2014/02/12 职场文书
2015年复活节活动总结
2015/02/27 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
CSS基础详解
2021/10/16 HTML / CSS
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers
python lambda 表达式形式分析
2022/04/03 Python
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技