导航：首页 > 开发技术 >

html5中怎么实现3D书本翻页动画效果

发表于：2025-02-01 作者：千家信息网编辑

千家信息网最后更新 2025年02月01日，今天小编给大家分享一下html5中怎么实现3D书本翻页动画效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下

千家信息网最后更新 2025年02月01日html5中怎么实现3D书本翻页动画效果

今天小编给大家分享一下html5中怎么实现3D书本翻页动画效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

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

HTML代码：

         
                    
            
        
    
                        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.

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书本翻页动画效果"这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注行业资讯频道。

很赞哦！