css3如何实现书本翻页效果 css3实现书本翻页效果代码示例

时间：2022-06-25 13:57:26 编辑：袖梨来源：一聚教程网

css3如何实现书本翻页效果？本篇文章小编给大家分享一下css3实现书本翻页效果代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

关键要点：

1.css3 3d动画的掌握

2.如何解决翻转后页面内容的改变

3.如何保持书本一直处于居中位置

代码总览

要点分析

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实现书本翻页效果代码示例

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程