initial commit

1 files changed, 138 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/transform-function/translate3d()/index.html b/files/zh-cn/web/css/transform-function/translate3d()/index.html
new file mode 100644
index 0000000000..ca01d9c4ea
--- /dev/null
+++ b/files/zh-cn/web/css/transform-function/translate3d()/index.html
@@ -0,0 +1,138 @@
+---
+title: translate3d()
+slug: Web/CSS/transform-function/translate3d()
+tags:
+  - CSS
+  - CSS 函数
+  - CSS 变换
+  - 参考
+translation_of: 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>