3D book turning special effect _ javascript Technique Based on javascripthtml5

This article mainly introduces how to implement the special effects of book turning based on javascripthtml5, which has some reference value. Interested friends can refer to it as a very cool HTML5 3D book page turning animation, the effect is relatively simple. Drag and Drop the mouse to simulate page flip by hand. What's more beautiful is that the page flip process shows a realistic 3D effect. Text and images in books are displayed in 3D, which is very cool.

Online Demo Source code download

HTML code

 
 
 
  
  
 
 
 
 
  
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.
 
 
 

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 example code of HTML5 3D book flip animation. I hope it will help you learn javascript programming.