Beispiel für einen Grafikcode für eine HTML5-3D-Buchumblätteranimation

Dies ist eine sehr coole HTML5-3D-Animation zum Umblättern von Büchern. Der Effekt ist relativ einfach, um das Umblättern von Seiten zu simulieren. Was noch schöner ist, ist, dass beim Umblättern ein realistischer 3D-Effekt entsteht . Der Text und die Bilder im Buch werden auch in 3D angezeigt, was sehr cool ist.

Online-Download des Demo-Quellcodes

HTML-Code

<p class="book p3d">
    <p class="back-cover p3d">
        <p class="page back flip"></p>
        <p class="page front p3d">
            <p class="shadow"></p>
            <p class="dino"></p>
        </p>
    </p>
    <p class="front-cover p3d">
        <p 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>
        </p>
        <p class="page back"></p>
    </p>
</p>

CSS-Code

.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-Code

(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] + &#39;Transform&#39;] = &#39;rotateX(&#39; + (60 + angle / 8) + &#39;deg)&#39;;
			page.style[prefixes[i] + &#39;Transform&#39;] = &#39;rotateY(&#39; + angle + &#39;deg)&#39;;
			dino.style[prefixes[i] + &#39;Transform&#39;] = &#39;rotateX(&#39; + (angle / 2) + &#39;deg)&#39;;
			shadow.style[prefixes[i] + &#39;Transform&#39;] = &#39;translateZ(1px) skewX(&#39; + (angle / 8) + &#39;deg)&#39;;
		}
	};

})(window, document);

Online-Demo-Quellcode-Download

Das Obige ist der Inhalt des grafischen Codebeispiels einer HTML5-3D-Animation zum Umblättern von Büchern. Weitere verwandte Inhalte finden Sie hier die chinesische PHP-Website (www.php.cn)!