精品二区视频,亚洲视频axxx,久久久一本精品

主頁 > 知識庫 > HTML5 3D書本翻頁動畫的實現示例

HTML5 3D書本翻頁動畫的實現示例

這是一款十分炫酷的HTML5 3D書本翻頁動畫，效果相對比較簡單，拖拽鼠標模擬用手翻頁，更漂亮的是翻頁過程中，呈現出逼真的3D立體效果。書本中的文字和圖片也會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);

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

標簽：赤峰萍鄉中山聊城金昌盤錦阿壩綏化

巨人網絡通訊聲明：本文標題《HTML5 3D書本翻頁動畫的實現示例》，本文關鍵詞 HTML5,書本,翻頁,動,畫的,；如發現本文內容存在版權問題，煩請提供相關信息告之我們，我們將及時溝通與處理。本站內容系統采集于網絡，涉及言論、版權與本站無關。

婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

HTML5 3D書本翻頁動畫的實現示例