基于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知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
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
程序员编程十条戒律
2009/07/09 PHP
PHP 编程安全性小结
2010/01/08 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
PHP微商城开源代码实例
2019/03/27 PHP
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
深入理解Django的自定义过滤器
2017/10/17 Python
获取Django项目的全部url方法详解
2017/10/26 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
Python目录和文件处理总结详解
2019/09/02 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
关于教师节的广播稿
2014/09/10 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
详解MindSpore自定义模型损失函数
2021/06/30 Python
python中 .npy文件的读写操作实例
2022/04/14 Python
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers