translate() [位移]

### 语法

```css
transform: translate(<translation-value>[, <translation-value>]);
```

<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>

### 说明
`translate()`函数能够移动元素。

### 取值
<div class="intro">
  <p><strong>translate(&lt;translation-value&gt;[, &lt;translation-value&gt;]);</strong>表示使元素在X轴和Y轴同时移动，&lt;translation-value&gt;表示位移量。包含两个参数，如果省略了第二个参数则第二个参数为0；如果参数为负，则表示往相反的方向移动。</p>
  <p><strong>translateX(&lt;translation-value&gt;);</strong>表示只在X轴(水平方向)移动元素。</p>
  <p><strong>translateY(&lt;translation-value&gt;);</strong>表示只在Y轴(垂直方向)移动元素。</p>
  <p><strong>translateZ(&lt;translation-value&gt;);</strong>表示只在Z轴移动元素，前提是元素本身或者元素的父元素设定了透视值。</p>
</div>
</section>

### 实例代码
<iframe src="http://example.itshubao.com/inexample/430.html" width="100%" height="300px" 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>