css3基础---perspective景深进阶

         景深:让3D场景有近大远小的效果（我们肉眼距离屏幕的距离）

                   是一个不可继承属性，但他可以作用于后代元素（不是作用于本身的）

          

          原理：

               景深越大 灭点越远 元素变形更小    

               景深越小 灭点越近 元素变形更大

         

         景深基点

              视角的位置

 

灭点

　　指的是立体图形各条边的延伸线所产生的相交点。透视点的消失点

 

 

 

 

 

景深基点

 　　默认值:

　　perspective-origin:50% 50%;（默认值）

 　　

 

perspective-origin
    同perspective属性，也是设置在父元素上，对后代元素起作用。 这个属性来设置你在X, Y轴坐标确定的那个点来看这个元素，Z轴是被perspective属性设置的 

　　

perspective-origin: left top; 

 

 

 transform-style

这个属性指定了子元素如何在空间中展示，只有两个属性值：flat（默认）和preserve-3d
          flat 表示所有子元素在2D平面呈现，
          preserve-3d 表示所有子元素在3D平面呈现，
 
如果被扁平化，则子元素不会独立的存在于三维空间。
因为该属性不会被（自动）继承，所以必须设置给父元素

transform-style: preserve-3d;

 

 

 

backface-visibility

backface-visibility属性用来设置，是否显示元素的背面，默认是显示的。
backface-visibility: keyword;
keyword有两个值，hidden和visible，默认值是visible。

backface-visibility: visible;