---
title: translate3d()
slug: Web/CSS/transform-function/translate3d
tags:
  - CSS
  - CSS 函数
  - CSS 变换
  - 参考
translation_of: Web/CSS/transform-function/translate3d()
original_slug: Web/CSS/transform-function/translate3d()
---
<div>{{CSSRef}}</div>

<p><code>translate3d()</code> CSS 函数在3D空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。</p>

<h2 id="语法">语法</h2>

<pre class="syntaxbox notranslate">translate3d(tx, ty, tz)</pre>

<dl>
 <dt>
 <h2 id="常量">常量</h2>
 </dt>
 <dt><em>tx</em></dt>
 <dd>是一个 {{cssxref("&lt;length&gt;")}} 代表移动向量的横坐标。</dd>
 <dt><em>ty</em></dt>
 <dd>是一个{{cssxref("&lt;length&gt;")}} 代表移动向量的纵坐标。</dd>
 <dt><em>tz</em></dt>
 <dd>是一个 {{cssxref("&lt;length&gt;")}} 代表移动向量的z坐标。它不能是{{cssxref("&lt;percentage&gt;")}} 值；那样的移动是没有意义的。</dd>
</dl>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td colspan="2" rowspan="2">
    <p> 此变换适用于3D空间，并不适用于这两种情况。</p>
   </td>
   <td colspan="1" rowspan="2">
    <p>平移不是ℝ<sup>3</sup>中的线性变换，不能使用笛卡尔坐标矩阵表示。</p>
   </td>
   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>tz</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
  </tr>
 </tbody>
</table>

<h2 id="示例">示例</h2>

<h3 id="单轴变化示例">单轴变化示例</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;p&gt;foo&lt;/p&gt;
&lt;p class="transformed"&gt;bar&lt;/p&gt;
&lt;p&gt;foo&lt;/p&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: perspective(500px) translate3d(10px,0px,0px);
  /* equivalent to perspective(500px) translateX(10px)*/
  background-color: blue;
}</pre>

<h3 id="结果">结果</h3>

<p>{{EmbedLiveSample("Using_a_single_axis_translation","100%","250")}}</p>

<h3 id="z轴与x轴变化">z轴与x轴变化</h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;p&gt;foo&lt;/p&gt;
&lt;p class="transformed"&gt;bar&lt;/p&gt;
&lt;p&gt;foo&lt;/p&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css notranslate">p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: perspective(500px) translate3d(10px,0px,100px);
  background-color: blue;
}</pre>

<h3 id="结果_2">结果</h3>

<p>{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation","100%","250")}}</p>

<p> </p>

<h2 id="规格">规格</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}</td>
   <td>{{Spec2("CSS Transforms 2")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>有关兼容性信息，请参阅<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a>的兼容性信息。</p>

<h2 id="另请参阅">另请参阅</h2>

<ul>
 <li>{{cssxref("transform")}}</li>
 <li>{{cssxref("&lt;transform-function&gt;")}}</li>
</ul>

<p> </p>