基于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系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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
PHP5/ZendEngine2的改进
2006/10/09 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
PHP对象实例化单例方法
2017/01/19 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
python读写csv文件方法详细总结
2019/07/05 Python
pandas如何处理缺失值
2019/07/31 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
python实现局域网内实时通信代码
2019/12/22 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
意大利奢侈品网站:Italist
2016/08/23 全球购物
.NET常见笔试题集
2012/12/01 面试题
企业后勤岗位职责
2014/02/28 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
学生自我评语大全
2014/04/18 职场文书
贷款担保申请书
2014/05/20 职场文书
工地材料员岗位职责
2015/04/11 职场文书