html5中怎么實現(xiàn)3D書本翻頁動畫效果

今天小編給大家分享一下html5中怎么實現(xiàn)3D書本翻頁動畫效果的相關知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

這是一款十分炫酷的HTML5 3D書本翻頁動畫，效果相對比較簡單，拖拽鼠標模擬用手翻頁，更漂亮的是翻頁過程中，呈現(xiàn)出逼真的3D立體效果。書本中的文字和圖片也會3D展示，非?？帷?/p>

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

以上就是“html5中怎么實現(xiàn)3D書本翻頁動畫效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。