perspective 透视

透视距离 和 透视位置 可以更好地观察拥有 3D 效果 的元素。

1. 官方解释

perspective 属性 定义 3D 元素距视图的距离，以像素计算。该 属性 允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性 时，其子元素会获得透视 效果 ，而不是元素本身。

perspective-origin 属性 定义 3D 元素所基于的 X 轴和 Y 轴。该 属性 允许您改变 3D 元素的 底部 位置。

当为元素定义 perspective-origin 属性 时，其子元素会获得透视 效果 ，而不是元素本身。

2. 解释

通过在父级元素设置这两个 属性 ，可以简单的理解为设置 一个 观察者的位置，也就是我们的眼睛 perspective 的大小代表眼睛距离元素的位置。

perspective-origin，代表眼睛所在的坐标点，我们可以设置 x 轴和 y 轴，这两个 属性 其实就间接的组成了 （x,y,z）空间坐标组，要注意的是，这是设置都是在父元素上进行的。

3. 语法

  div
  { 
	 perspective  :  px ; 
	 perspective-origin  :  , ; 
 } 
 @H_ 403 _70@


4. 兼容性 


目前浏览器都 不支持  perspective  属性 。

Chrome 和 Safari  支持 替代的 -webkit-perspective  属性 。


5. 实例 

 
  增加  一个  500px 的透视 效果  
 

    < div   class   =  " demo "   >  
	   < div   class   =  " cell "   >     </ div  >  
   </ div  >  
 @H_ 403 _70@


   .demo   { 
	 perspective  :  px ; 
	 background  :   #f2f2f2  ; 
 } 
  .cell   { 
	 width  :  px ; 
	 height  :  px ; 
	 background  :   #000  ; 
	 transform  :  translate d  ( px,-px,-px )   rotateY  ( deg )  ; 
 } 
 @H_ 403 _70@


 效果 图：


 



 无透视 


 



 有透视 效果 图 


解释：加了 500px 的透视 效果 。

 
  修改 观察点的位置为 50% 50% 。 
 

   .demo   { 
	 perspective  :  px ; 
	 background  :   #f2f2f2  ; 
	 perspective-origin  :   ; 
 } 
  .cell   { 
	 width  :  px ; 
	 height  :  px ; 
	 background  :   #000  ; 
	 transform  :  translate d  ( px,-px,-px )   rotateY  ( deg )  ; 
 } 
 @H_ 403 _70@


 效果 图:


 



 设置透视的 x 轴和 y 轴。 


6. 经验 分享  


 perspective-origin  通常使用  %  代表在观察父元素，观察点的坐标。


7. 小结 

 
 推荐设置  none  而不是 0 ，内部的子元素不会透视。 
 该 属性 的作用范围是针对子元素让其具有透视 效果 。 
 不可以使用 % 数作为透视距离。 
 

             
                transform 2D 空间转换 ?  ?letter-spacing 字间距  
             
          

        

      
查看更多关于perspective 透视的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did92586