Realize 3D flip book special effect based on javascript html5_javascript skills

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

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

The above is the sample code for HTML5 3D book page turning animation. I hope it will be helpful for everyone to learn javascript programming.