css3实现书本翻页效果的示例代码
这篇文章主要介绍了css3实现书本翻页效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
关键要点：
1.css3 3d动画的掌握
2.如何解决翻转后页面内容的改变
3.如何保持书本一直处于居中位置
代码总览
Document 封面123456尾面
要点分析
css3动画属性解释：
perspective: 5000px; 这里是透视属性,可以简单认为是实现了“近大远小”效果的属性
这里需要注意perspective需要设置在进行了3d变换的元素的父元素上，因为进行3d变换
的元素只有以父元素为背景做透视变换才能看到效果。
transition:all 1s ease；这里是过度属性，可以设置过度时间以及应用的缓动函数
transform-origin: left center;；这个属性可以设置变换属性的起始点，这里的意思是以 左中为点进行绕y轴旋转
transform-style: preserve-3d;；这个属性可以让设置了该属性的元素的子元素也能呈现相同 的基于父元素的透视，前提是子元素也进行了3d变换。
解决页面内容的显示问题：
backface-visibility: hidden;让进行了180度旋转的元素隐藏，即背面不可视
运用这个属性可以让页面1旋转180度后隐藏而从-180度旋转为0度的页面2显示，从而实现 书本内容的切换
解决书本居中页面的问题：
transform: translate(0,0) 通过平移属性，解决此问题
剩下的就是用js添加点击事件，控制元素样式实现翻页动画
到此这篇关于css3实现书本翻页效果的示例代码的文章就介绍到这了,更多相关css3 书本翻页内容请搜索0133技术站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持0133技术站！