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

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

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

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

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

HTML

1. <div>  
2.     <img src="images/cardKingClub.png" alt="" width="142" height="200" />  
3.     <img src="images/cardKingClub.png" alt="" width="142" height="200" />  
4. </div>  
5. <div>  
6.     <img src="images/cardKingClub.png" alt="" width="142" height="200" />  
7.     <img src="images/cardKingClub.png" alt="" width="142" height="200" />  
8. </div>  

CSS

1. div {   
2.     width: 500px;   
3.     height: 300px;   
4.     margin: 30px auto;   
5.     position: relative;   
6.     background: url(images/bg-grid.jpg) no-repeat center center;   
7.     background-size: 100% 100%;   
8. }   
9. div img {   
10.     position: absolute;   
11.     top: 50%;   
12.     left: 50%;   
13.     margin-left: -71px;   
14.     margin-top: -100px;    
15.     transform-origin: bottombottom;   
16. }   
17. div img:nth-child(1){   
18.     opacity: .5;   
19.     z-index: 1;   
20. }   
21. div img:nth-child(2){   
22.     z-index: 2;   
23.     transform: rotateX(45deg);   
24. }   
25. div:nth-of-type(2){   
26.     perspective: 500px