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

    
    
        

            
封面
            
1
        
        

            
2
            
3
        
        

            
4
            
5
        
        

            
6
            
尾面
        
    

要点分析

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添加点击事件，控制元素样式实现翻页动画