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.
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书本翻页动画了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。