Revision 1131049 of translate()

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

Tags:

Revision Content

The translate() CSS function moves the position of the element on the plane. This transformation is characterized by a vector whose coordinates define how much it moves in each direction.

Syntax

translate(tx)       or
translate(tx, ty)

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. If unspecified, it will equal 0 : translate(2) means translate(2, 0).

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
A translation is not a linear transform in ℝ² and cannot be represented using a matrix in the cartesian coordinates system.	$(\begin{matrix} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
	`[1 0 0 1 tx ty]`

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: translate(10px);
  /* equivalent to translateX(10px)*/
  background-color: blue;
}

Result

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

Combining y-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: translate(10px,10px);
  background-color: blue;
}

Result

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

Revision Source

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

<p>The <code>translate()</code> CSS function moves the position of the element on the plane. This transformation is characterized by a vector whose coordinates define how much it moves in each direction.</p>

<p><img src="https://mdn.mozillademos.org/files/12121/translate.png" style="height:195px; width:249px" /></p>

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

<pre class="syntaxbox">
translate(tx)       <em>or</em>
translate(tx, ty)
</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. If unspecified, it will equal <code>0</code>&nbsp;:&nbsp; <code>translate(2)</code> means <code>translate(2, 0)</code>.</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="1" rowspan="2">
    <p>A translation is not a linear transform in ℝ<sup>2</sup> and cannot be represented using a matrix in the cartesian coordinates system.</p>
   </td>
   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></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>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
  </tr>
  <tr>
   <td><code>[1 0 0 1 tx ty]</code></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: translate(10px);
  /* equivalent to translateX(10px)*/
  background-color: blue;
}
</pre>

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

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

<h3 id="Combining_y-axis_and_x-axis_translation">Combining y-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: translate(10px,10px);
  background-color: blue;
}
</pre>

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

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

Revert to this revision