perspective [透视]

### 语法

```css
transform: perspective(length);
perspective:<length>;
```

<table class="table"><thead><tr><th width="20%">语法项目</th><th>说明</th></tr></thead><tbody><tr><td>初始值</td><td>none</td></tr><tr><td>适用于</td><td>块元素和行内元素</td></tr><tr><td>可否继承</td><td>否</td></tr><tr><td>取值</td><td>长度值</td></tr><tr><td>媒介</td><td>视觉</td></tr><tr><td>版本</td><td>CSS3.0</td></tr></tbody></table>

### 说明
`perspective` 变换函数对于 3D 变换来说至关重要。该函数会设置查看者的位置，并将可视内容映射到一个视锥上，继而投影到一个 2D 视平面上。如果不指定透视，则 Z 空间中的所有点将平铺到同一个 2D 视平面中，并且变换结果中将不存透视深概念。作用于元素的子元素。

`perspective`有两种写法，一种是设置所有的子元素有一个共同的透视值，`perspective`作为一个属性值来写；一种是直接作用于元素本身，`perspective`作为`transform`的一个函数来写如：

.wrap{-webkit-perspective:1000px;}
    .wrap .child{-webkit-transform:perspective(1000px);}

关联属性：<a href="http://www.itshubao.com/doc/css3_animation/4997.html" target="_blank">perspective-origin</a>。

### 取值
`none`：没有透视变换功能。

`length`：指定一个透视值。

### 实例代码
<iframe src="http://example.itshubao.com/inexample/433.html" width="100%" height="200px" frameborder="0" scrolling="no"></iframe>

### 兼容性
<table class="table"><thead><tr><th class="ie" width="20%">IE</th><th class="firefox" width="20%">Firefox</th><th class="opera" width="20%">Opera</th><th class="safari" width="20%">Safari</th><th class="chrome" width="20%">Chrome</th></tr></thead><tbody><tr><td>IE 10+</td><td>Firefox 3.5+</td><td>Opera 11.50+</td><td>Safari 10+</td><td>Chrome 2.0+</td></tr></tbody></table>