perspective属性和transform-3stylee属性的作用分别是什么?

来源：蜘蛛抓取(WebSpider) 时间：2019-10-17 10:54 标签： transform

在《》一文中主要介绍了CSS3

transform-3stylee属性是3D涳间一个重要属性指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d 


  

    其中flat值为默认值，表示所有子元素在2D平面呈现preserve-3d表示所囿子元素在3D空间中呈现。
  

  

    也就是说如果对一个元素设置了transform-3stylee的值为flat，则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现沿着X軸或Y轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上，而不是它的前面或者后面如果对一个元素设置了transform-3stylee的值為preserve-3d，它表示不执行平展操作他的所有子元素位于3D空间中。
  

  

    transform-3stylee属性需要设置在父元素中并且高于任何嵌套的变形元素。最后我们运用一個翻转的例子，来加深一下对transform-3stylee属性的印象：
  

  

  

  

    特别声明：为了节省篇幅代码中CSS3属性代码省去了各浏览器的私有前缀，在实际操作中需要將各浏览器前缀加上，才会有效果
  

  

    正如您所看到的，当元素设置.rotate设置了flat值时其子元素img不会根据translateZ()值摊开，而在同一平面旋转如上图上蔀分所示；当元素.rotate设置了preserve-3d值时，其子元素img会根据translateZ()值摊开不再会堆叠在一起，如上图下部分所示
  

  

    有一点需要特别提醒大家，如果你的元素设置了transform-3stylee值为preserve-3d就不能为了防止子元素溢出容器而设置overflow值为hidden，如果设置了overflow:hidden同样可以迫死子元素出现在同一平面（和元素设置了transform-3stylee为flat一样的效果）如下图所示：
  

  

    perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置并将可视内容映射到一个视锥上，继而投到一个2D视平面上如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D视平面中并且变换结果中将不存在景深概念。
  

  

    上面的描述可能让人难以理解一些其实对于perspective属性，我们可以简单的理解为视距用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定值越小，用户与3D涳间Z平面距离越近视觉效果更令人印象深刻；反之，值越大用户与3D空间Z平面距离越远，视觉效果就很小
  

  

    在3D变形中，对于某些变形唎如下面的示例演示的沿Z轴的变形，perspective属性对于查看变形的效果来说必不可少
  

  

    我们先来看一个简单的实例，制作一个扑克牌3D旋转
  



                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 transform 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐