HTML5 3D book page turning animation graphic code example

This is a very cool HTML5 3D book page turning animation. The effect is relatively simple. Drag the mouse to simulate turning pages by hand. What is even more beautiful is that during the page turning process, it presents a realistic 3D three-dimensional effect. The text and pictures in the book will also be displayed in 3D, which is very cool.

Online demo source code download

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 source code download

The above is the content of the graphic code example of HTML5 3D book page turning animation. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!