HTML5 3D书本翻页动画的实现示例


Posted in HTML / CSS onAugust 28, 2019

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

HTML5 3D书本翻页动画的实现示例

HTML代码

<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);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS3实现质感细腻丝滑按钮
Mar 09 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
浅析HTML5页面元素及属性
Jan 20 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 HTML / CSS
css height属性中的calc方法详解
Jun 03 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 #HTML / CSS
前端实现打印图像功能
Aug 27 #HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 #HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 #HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 #HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 #HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 #HTML / CSS
You might like
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
JavaScript OOP面向对象介绍
2010/12/02 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
js有序数组的连接问题
2013/10/01 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
微信小程序之蓝牙的链接
2017/09/26 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
Django 实现下载文件功能的示例
2018/03/06 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
通过cmd进入python的步骤
2020/06/16 Python
Python常用断言函数实例汇总
2020/11/30 Python
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
工厂厂长岗位职责
2013/11/08 职场文书
省文明单位申报材料
2014/05/08 职场文书
护士求职信范文
2014/05/24 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
奖励通知
2015/04/22 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
辞职信怎么写?
2019/05/21 职场文书
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电