基于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 相关文章推荐
关于Mozilla浏览器不支持innerText的解决办法
Jan 01 Javascript
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
js加强的经典分页实例
Mar 15 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
JS正则表达式验证中文字符
May 08 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
vue大型项目之分模块运行/打包的实现
Sep 21 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
smarty的保留变量问题
2008/10/23 PHP
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
php 执行系统命令的方法
2009/07/07 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
PHP实现八皇后算法
2019/05/06 PHP
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
python 从远程服务器下载东西的代码
2013/02/10 Python
Python中的map、reduce和filter浅析
2014/04/26 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
django中的setting最佳配置小结
2017/11/21 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
八年级历史教学反思
2014/01/10 职场文书
企业文化演讲稿
2014/05/20 职场文书
交通事故委托书范本
2014/09/28 职场文书
教师节横幅标语
2014/10/08 职场文书
云台山导游词
2015/02/03 职场文书
安全承诺书格式范本
2015/04/28 职场文书
小学见习报告
2015/06/23 职场文书
论语读书笔记
2015/06/26 职场文书