Revision 1131051 of translate3d()

Revision slug: Web/CSS/transform-function/translate3d
Revision title: translate3d()
Revision id: 1131051
Created: Oct 17, 2016, 3:44:41 PM
Creator: Sebastianz
Is current revision? Yes
Comment Added 'CSS Function' tag

Tags:

Revision Content

The translate3d() CSS function moves the position of the element in the 3D space. This transformation is characterized by a 3-dimension vector whose coordinates define how much it moves in each direction.

Syntax

translate3d(tx, ty, tz)

Values

tx: Is a {{cssxref("<length>")}} representing the abscissa of the translating vector.
ty: Is a {{cssxref("<length>")}} representing the ordinate of the translating vector.
tz: Is a {{cssxref("<length>")}} representing the z component of the translating vector. It can't be a {{cssxref("<percentage>")}} value; in that case the property containing the transform is considered invalid.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
This transform applies to the 3D space and cannot be represented on the plane.		A translation is not a linear transform in ℝ³ and cannot be represented using a matrix in the Cartesian coordinates system.	$(\begin{matrix} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & tz \\ 0 & 0 & 0 & 1 \end{matrix})$

Examples

Using a single axis translation

HTML

<p>foo</p>
<p class="transformed">bar</p>
<p>foo</p>

CSS

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

Result

{{EmbedLiveSample("Using_a_single_axis_translation","100%","250")}}

Combining z-axis and x-axis translation

HTML

<p>foo</p>
<p class="transformed">bar</p>
<p>foo</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

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

Result

{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation","100%","250")}}

Revision Source

<div>{{CSSRef}}</div>

<p>The <code>translate3d()</code> CSS function moves the position of the element in the 3D space. This transformation is characterized by a 3-dimension vector whose coordinates define how much it moves in each direction.</p>

<h2 id="Syntax">Syntax</h2>

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

<h2 id="Values">Values</h2>

<dl>
 <dt><em>tx</em></dt>
 <dd>Is a {{cssxref("&lt;length&gt;")}} representing the abscissa of the translating vector.</dd>
 <dt><em>ty</em></dt>
 <dd>Is a {{cssxref("&lt;length&gt;")}} representing the ordinate of the translating vector.</dd>
 <dt><em>tz</em></dt>
 <dd>Is a {{cssxref("&lt;length&gt;")}} representing the z component of the translating vector. It can't be a {{cssxref("&lt;percentage&gt;")}} value; in that case the property containing the transform is considered invalid.</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>This transform applies to the 3D space and cannot be represented on the plane.</p>
   </td>
   <td colspan="1" rowspan="2">A translation is not a linear transform in ℝ<sup>3</sup> and cannot be represented using a matrix in the Cartesian coordinates system.</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="Examples">Examples</h2>

<h3 id="Using_a_single_axis_translation">Using a single axis translation</h3>

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

<pre class="brush: html">
&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">
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>

<h4 id="Result">Result</h4>

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

<h3 id="Combining_z-axis_and_x-axis_translation">Combining z-axis and x-axis translation</h3>

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

<pre class="brush: html">
&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">
p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

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

<h4 id="Result_2">Result</h4>

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

Revert to this revision