摘要:这是一款十分炫酷的H5页面制作 3D书本翻页动画,效果相对比较简单,拖拽鼠标模拟用手翻页,更漂亮的是翻页过程中,呈现出逼真的3D立体效果。书本中的文字和图片也会3D展示,非常酷。
这是一款十分炫酷的H5页面制作 3D书本翻页动画,效果相对比较简单,拖拽鼠标模拟用手翻页,更漂亮的是翻页过程中,呈现出逼真的3D立体效果。书本中的文字和图片也会3D展示,非常酷。
HTML代码
<div class="book p3d">
<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书本翻页动画的示例代码,有兴趣的朋友可以下载完整代码研究。
希望这篇文章可以帮助到你。总之,同学们,你想要的职坐标IT频道都能找到!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号