今天小编给大家分享一下html5中怎么实现3D书本翻页动画效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

这是一款十分炫酷的HTML5 3D书本翻页动画，效果相对比较简单，拖拽鼠标模拟用手翻页，更漂亮的是翻页过程中，呈现出逼真的3D立体效果。书本中的文字和图片也会3D展示，非常酷。

HTML代码：

<divclass="back-coverp3d"><divclass="pagebackflip"></div><divclass="pagefrontp3d"><divclass="shadow"></div><divclass="dino"></div></div></div><divclass="front-coverp3d"><divclass="pagefrontflipp3d"><p>Loremipsumdolorsitamet,consecteturadipiscingelit.Namfermentumnislquisnullaeleifenddignissim.Curabiturvariuslobortistincidunt.Maecenasgravida,nullaquisluctusimperdiet,ipsumnibhconsecteturante,insodalesmassatortoregetneque.Donecportaligulamassa,idsagittisest.Utnisltellus,faucibusnecfeugiatut,laoreetiaculisfelis.Suspendisseultricesmaurisveltellussuscipitcommodo.Integervitaetortorerat.Pellentesquenontempornisi.</p></div><divclass="pageback"></div></div></div>

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:050%;-moz-transform-origin:050%;-ms-transform-origin:050%;-o-transform-origin:050%;transform-origin:050%;-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:0100%;-moz-transform-origin:0100%;-ms-transform-origin:0100%;-o-transform-origin:0100%;transform-origin:0100%;}.dino{background:url(dino.png)no-repeat;}.shadow{background:url(shadow.png)no-repeat;}

JavaScript代码：

(function(window,document){varprefixes=['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){returnMath.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;}varangle=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);

以上就是“html5中怎么实现3D书本翻页动画效果”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。