html书本翻页效果实现,3d动画书本翻页图片

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

　　超文本标记语言代码

　　div class=封底p3d div class=页面后翻/div div class=页面前翻p3d div class=阴影/div div class=迪诺/div /div /div div class=封面前翻p3d div class=页面前翻这是一个痛苦的过程，也是一个肥胖的过程.那场发酵对我来说毫无意义。多种多样的。怀孕的时候，没有怀孕的时候，我就想好了。从马萨的利古拉门出去，就能看到箭。但我告诉你，这是我的错，这是我的错。最贵的商品是什么？整数。没有时间限制. class= page back /div/div/div CSS代码。书{宽度：300 px高度：300像素边距-顶部：-150像素；位置：绝对；左：50%;top:50%；-WebKit-transform:rotateX(60度)；-moz-transform:rotateX(60度)；-ms-transform:rotateX(60度)；-o变换：rotateX(60度);变换：rotateX(60度);-网络工具包-用户选择：无；-moz-用户-选择：无；-ms-用户-选择：无；-o-用户选择：无；用户选择：无；}.页面{宽度：300 px高度：300像素填充：1em位置：绝对；左：0;top:0；文本缩进：2em}。正面{背景色：# d93e2b}。back { background-color:# fff；}.封面{光标：移动；-WebKit-transform-origin:0 50%；-moz-transform-origin:0 50%；-ms-transform-origin:0 50%；-o-transform-origin:0 50%；转换原点：0 50%;-WebKit-transform:rotateY(0度)；-moz-transform:rotateY(0度)；-ms-transform:rotateY(0度)；-o-transform:rotateY(0度);变换：旋转(0度)；}.前盖back { background-image:URL(MDN。png)；背景-重复：不重复；背景-职位：50% 50%;-WebKit-transform:translate z(3px)；-moz-transform:translate z(3px)；-ms-transform:translate z(3px)；-o-transform:平移z(3px)；transform:平移z(3px)；}.后盖. back {-WebKit-transform:translate z(-3px)；-moz-transform:平移z(-3px)；-ms-transform:平移z(-3px)；-o-transform:平移z(-3px)；transform:平移z(-3px)；} .p3d {-WebKit-transform-style:preserve-3d；-moz-transform-style:preserve-3d；-ms-transform-style:preserve-3d；-o-transform-style:preserve-3d；变换样式：保留-3d；}.flip {-WebKit-transform:rotateY(180度)；-moz-transform:rotateY(180度)；-ms变换：rotateY(180度);-o变换：rotateY(180度);变换：旋转(180度);}.迪诺。阴影{宽度：196像素身高：132像素位置：绝对；左：60px顶配：60px-WebKit-transform-origin:0 100%；-moz-transform-origin:0 100%；-ms-transform-origin:0 100%；-o-transform-origin:0 100%；变换原点：0 100%;}.迪诺{背景：网址(迪诺。png)不重复；}.阴影{背景：URL(阴影。png)无重复；}JavaScript代码

　　(function (window，document) { var prefixes=[Webkit ， Moz ， ms ， ]，book=document.querySelectorAll( .book)[0]，page=document.querySelectorAll( .front-cover)[0]，dino=document.querySelectorAll( .dino)[0]，shadow=document。查询selectorall(.shadow)[0]，hold=false，中心点=窗口。内宽/2，pageSize=300，clamp=function (val，min，max) { return Math.max(min，Math.min(val，max))；};页面。onmousedown=function(){ hold=true；};窗户。onmouseup=function(){ if(hold){ hold=false；} };窗户。on resize=function(){中心点=窗口。内宽/2；};窗户。onmousemove=function(evt){ if(！持有){ return} var angle=clamp((中心点-evt。pagex pageSize)/pageSize *-90，-180，0)，I，j；for (i=0，j=prefixes.lengthI j我){书。style[prefixes[I] Transform ]= rotateX((60 angle/8) deg )；页面。style[prefixes[I] Transform ]= rotateY( angle deg)；迪诺。style[前缀[I] Transform ]= rotateX((angle/2) deg )；影子。style[prefixes[I] Transform ]= translate z(1px)skewX((angle/8) deg )；} };})(窗口，文档);以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。