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, conctetur adipiscing elit. nam fermentum nisl quis nulla eleifend dignissim. curabitur varius lobortis tincidunt. maecenas gravida, nulla quis luctus imperdiet, ipsum nibh conctetur ante, in sodales massa tortor eget neque. donec porta ligula massa, id sagittis est. ut nisl tellus, faucibus nec feugiat ut, laoreet iaculis felis. suspendis 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);    -m放风筝比赛oz-transform: rotatex(60deg);    -ms-transform: rotatex(60deg);    -o-transform: rotatex(60deg);    transform: rotatex(60deg);    -webkit-u爱的传递作文r-lect: none;    -moz-ur-lect: none;    -ms-ur-lect: none;    -o-ur-lect: none;    ur-lect: 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: prerve-3d;    -moz-transform-style: prerve-3d;    -ms-transform-style: prerve-3d;    -o-transform-style: prerve-3d;    transform-style: prerve-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.querylectorall('.book')[0],        page = document.querylectorall('.front-cover')[0],        dino = document.querylectorall('.dino')[0],        shadow = document.querylectorall('.shadow')[0],        hold = fal,        centerpoint = window.innerwidth / 2,       分子是由什么构成的 pagesize = 300,        clamp = function (val, min, max) {            return math.max(min, math.min(val, max));        };    page.onmoudown = function () {        hold = true;    };    window.onmouup = function () {        if (hold) {            hold = fal;        }    };    window.onresize = function () {        centerpoint = window.innerwidth / 2;    };    window.onmoumove = function (evt) {        if (!hold) {            return;        }        var angle = clamp((centerpoint - evt.pa南通师范高等专科学校gex + 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);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。