HTML5 3D书本翻页动画

本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划

这是一款十分炫酷的HTML5 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书本翻页动画的示例代码,有兴趣的朋友可以下载完整代码研究。

本文链接:http://www.codeceo.com/article/html5-3d-book-paging.html
本文作者:码农网 – 小峰
原创作品,转载必须在正文中标注并保留原文链接和作者等信息。]

相关文章

在文章中找不到问题答案?您还可以

前往问答社区提问

关注我们的微博

付费投稿计划
点击查看详情