Exemple de code graphique d'animation de rotation de page de livre HTML5 3D

Il s'agit d'une animation de rotation de page de livre HTML5 3D très cool. L'effet est relativement simple. Faites glisser la souris pour simuler la rotation des pages à la main. Ce qui est encore plus beau, c'est que pendant le processus de rotation de page, il présente un effet 3D réaliste. . Le texte et les images du livre seront également affichés en 3D, ce qui est très cool.

Téléchargement du code source de la démo en ligne

Code HTML

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

Code 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;
}

Code 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] + &#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);

Téléchargement du code source de la démonstration en ligne

Ce qui précède est le contenu de l'exemple de code graphique de l'animation de rotation de page de livre 3D HTML5. Pour plus de contenu connexe, veuillez prêter attention à. le site PHP chinois (www.php .cn) !