html书本翻页效果实现,实现翻书的效果可以使用 CSS3 里的什么方法?
关键要点：
1.css3 3d动画的掌握
2.如何解决翻转后页面内容的改变
3.如何保持书本一直处于居中位置
代码总览
！DOCTYPE html html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，initial-scale=1.0 标题文档/标题/标题样式.book { margin:auto；页边距-顶部：2雷姆；transform: translate(0，0)；视角：5000像素最大宽度：40%;高度：800像素位置：相对；转场：全1s轻松；} .page { position:absolute；宽度：100%;身高：100%;top:0；右：0;背景色：粉色；光标：指针；转场：全1s轻松；变换-原点：左中心；变换样式：保留-3d；} .活动{ z索引：1;} .页面。翻转{变换：旋转(-180度)} .后退，front { text-align:center；位置：绝对；背面-可见性：隐藏；宽度：100%;身高：100%;} .back { transform:rotateY(180度)}/style body div class= book div class= page active div class= front 封面/div div class= back 1/div/div div class= page div class= front 2/div div class= back 3/div div class= front 4/div div class= back 5/div/div div class= page div class= front 6/div div class= back 尾面/div/div/body脚本let pages=document。getelementsbyclassname( page )let book=document。getelementsbyclassname( book )[0]函数book move(drect){ if(drect=== right ){ book。风格。transform= translate(50%，0) } else if(drect=== left ){ book。风格。transform= translate(0，0) } else { book。风格。transform= translate(100%，0) } } for(let iipages.lengthi ){第[我]页addEventListener(click ，()={ if(pages[I].班级名单。包含(翻转){第[I]页。班级名单。移除(“翻转”)页面[I]。班级名单。add( active )if(I===0){ book move( left )} if(pages[I]。nextElementSibling！==null){ pages[I]。nextelementsibling。班级名单。remove( active )} else { book move( right )} } else { pages[I]。班级名单。添加(“翻转”)页面[I]。班级名单。remove( active )if(I===0){ book move( right )} if(pages[I].nextElementSibling！==null){ pages[I]。nextelementsibling。班级名单。add( active )} else { book move( close )} } }/script/html要点分析
css3动画属性解释：
视角：5000像素这里是透视属性，可以简单认为是实现了"近大远小"效果的属性
这里需要注意远景需要设置在进行了三维(三维的缩写)变换的元素的父元素上，因为进行三维(三维的缩写)变换
的元素只有以父元素为背景做透视变换才能看到效果。
转场：全1s轻松；这里是过度属性，可以设置过度时间以及应用的缓动函数
变换-原点：左中心；这个属性可以设置变换属性的起始点，这里的意思是以左中为点进行绕y轴旋转
变换样式：保留-3d；这个属性可以让设置了该属性的元素的子元素也能呈现相同的基于父元素的透视，前提是子元素也进行了三维(三维的缩写)变换。
解决页面内容的显示问题：
背面-可见性：隐藏；让进行了180度旋转的元素隐藏，即背面不可视
利用该属性，可以在旋转180度后隐藏第1页，显示从-180度旋转到0度的第2页，从而实现书籍内容的切换。
解决书的中心页问题：
Transform: translate(0，0)通过翻译属性解决了这个问题。
剩下的就是用js添加click事件，控制元素样式实现翻页动画。
本文关于css3图书翻页效果的示例代码到此为止。有关css3图书翻页的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。