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

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