详解CSS3的perspective属性设置3D变换距离的方法

详解CSS3的perspective属性设置3D变换距离的方法

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

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

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

我们先来看一个简单的实例，制作一个扑克牌3D旋转效果，并且一个在扑克牌的父元素添加了视距perspective，而另一个却没有设置：

HTML

<div>  
    <img src="images/cardKingClub.png" alt="" width="142" height="200" />  
    <img src="images/cardKingClub.png" alt="" width="142" height="200" />  
</div>  
<div>  
    <img src="images/cardKingClub.png" alt="" width="142" height="200" />  
    <img src="images/cardKingClub.png" alt="" width="142" height="200" />  
</div>  

css

div {   
    width: 500px;   
    height: 300px;   
    margin: 30px auto;   
    position: relative;   
    background: url(images/bg-grid.jpg) no-repeat center center;   
    background-size: 100% 100%;   
}   
div img {   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    margin-left: -71px;   
    margin-top: -100px;    
    transform-origin: bottombottom;   
}   
div img:nth-child(1){   
    opacity: .5;   
    z-index: 1;   
}   
div img:nth-child(2){   
    z-index: 2;   
    transform: rotateX(45deg);   
}   
div:nth-of-type(2){   
    perspective: 500px;   
}  

其效果如下：

上图的效果完全说明了一切。父节点没有设置perspective的情况下，梅花King的3D旋转效果不明显，而在父节点设置perspective后，梅花King才像个3D旋转。