基于javascript html5实现3D翻书特效_javascript技巧_脚本之家

澳门新葡亰娱乐在线 1

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

以上就是HTML5
3D书本翻页动画的示例代码,希望对大家学习javascript程序设计有所帮助。

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;
}
          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.   

.book { width: 300px; height: 300px; margin-top: -150px; position: absolute; left: 50%; top: 50%; -webkit-transform: rotateX; -moz-transform: rotateX; -ms-transform: rotateX; -o-transform: rotateX; transform: rotateX; -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; -moz-transform: rotateY; -ms-transform: rotateY; -o-transform: rotateY; transform: rotateY;}.front-cover .back { background-image: url; background-repeat: no-repeat; background-position: 50% 50%; -webkit-transform: translateZ; -moz-transform: translateZ; -ms-transform: translateZ; -o-transform: translateZ; transform: translateZ;}.back-cover .back { -webkit-transform: translateZ; -moz-transform: translateZ; -ms-transform: translateZ; -o-transform: translateZ; transform: translateZ; }.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; -moz-transform: rotateY; -ms-transform: rotateY; -o-transform: rotateY; transform: rotateY;}.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 no-repeat;}.shadow { background: url no-repeat;}

本文由澳门新葡亰娱乐在线,码农网 –
小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

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

澳门新葡亰娱乐在线 1

(function  { var prefixes = ['Webkit', 'Moz', 'ms', 'O', ''], book = document.querySelectorAll[0], page = document.querySelectorAll[0], dino = document.querySelectorAll[0], shadow = document.querySelectorAll[0], hold = false, centerPoint = window.innerWidth / 2, pageSize = 300, clamp = function  { return Math.max(min, Math.min; }; page.onmousedown = function () { hold = true; }; window.onmouseup = function  { hold = false; } }; window.onresize = function () { centerPoint = window.innerWidth / 2; }; window.onmousemove = function  { 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 + 'deg)'; page.style[prefixes[i] + 'Transform'] = 'rotateY'; dino.style[prefixes[i] + 'Transform'] = 'rotateX + 'deg)'; shadow.style[prefixes[i] + 'Transform'] = 'translateZ skewX + 'deg)'; } };});

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图