CSS中实现3D效果总结与示例

今天简单总结一下关于实现3D的几个较为重要的注意点。

一、透视

1.描述

• 如果想要在网页内产生3D效果需要透视。（理解成3D物体投影在2D平面内）
• 模拟人类的视觉位置，可认为安排一直眼睛去看。
• 透视我们也称为视距：视距就是人的眼睛到屏幕的距离。
• 距离视觉点越近的在电脑屏幕成像越大，反之越远就越小。
• 透视的单位是像素

2.图解

• d: 就是视距，就是人的眼睛到屏幕的距离。
• z: 就是z轴，物体距离屏幕的位置，z值越大（正值），我们看到的物体就越大

3.代码

perspective: <视距>;
#例如：
perspective: 500px;

二、3D呈现transform-style

1.描述

• 控制子元素是否开启三维立体环境。
• transform-style: flat;子元素不开启3D立体空间（默认的）
• transform-style: preserve-3d;子元素开启3D立体空间
• 代码写给父盒子，但是影响的是子盒子

2.代码

transform-style: preserve-3d;

三、3D导航示例

1.代码

    
    
    
    



    

        

            

                
周星星
                
新年快乐
            
        
        

            

                
周星星
                
万事如意
            
        
        

            

                
周星星
                
阖家幸福
            
        
        

            

                
周星星
                
牛气冲天
            
        
    

2.效果

四、备注

1.本文参考：https://www.bilibili.com/video/BV14J4114768?p=377