HTML5 3D 책 페이지 넘김 애니메이션 그래픽 코드 예제

이것은 매우 멋진 HTML5 3D 책 페이지 넘기기 애니메이션입니다. 효과는 비교적 간단합니다. 더욱 아름다운 점은 페이지 넘기기 과정에서 사실적인 3D 효과를 제공한다는 것입니다. . 책에 담긴 텍스트와 그림도 3D로 표시되는데, 정말 멋지네요.

온라인 데모 소스 코드 다운로드

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>

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

온라인 데모 소스코드 다운로드

위 내용은 HTML5 3D 책 페이지 넘기기 애니메이션의 그래픽 코드 예제 내용이며, 더 많은 관련 내용은 PHP 중국어 홈페이지(www.kr)를 참고해주세요. .php.cn)!