Revision 1131057 of translateZ()

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

Tags:

Revision Content

The translateZ() CSS function moves the element along the z-axis of the 3D space. This transformation is characterized by a {{cssxref("<length>")}} defining how much it moves.

translateZ(tz) is a shorthand for translate3d(0, 0, tz).

Syntax

translateZ(t)

Values

t: 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 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & t \\ 0 & 0 & 0 & 1 \end{matrix})$

Examples

HTML

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

CSS

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

.transformed {
  /* Adding a perspective to create a 3d space */
  /* The user is looking "from" 500px and we */
  /* push the element forward (toward the user) */
  /* by 200px */
  transform: perspective(500px) translateZ(200px);
}

Result

Revision Source

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

<p>The <strong><code>translateZ()</code></strong> CSS function moves the element along the z-axis of the 3D space. This transformation is characterized by a {{cssxref("&lt;length&gt;")}} defining how much it moves.</p>

<p><code>translateZ(tz)</code> is a shorthand for <code>translate3d(0, 0, tz)</code>.</p>

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

<pre class="syntaxbox">
translateZ(t)
</pre>

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

<dl>
 <dt><em>t</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">This transform applies to the 3D space and cannot be represented on the plane.</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>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>t</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="HTML">HTML</h3>

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

<h3 id="CSS">CSS</h3>

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

.transformed {
  /* Adding a perspective to create a 3d space */
  /* The user is looking "from" 500px and we */
  /* push the element forward (toward the user) */
  /* by 200px */
  transform: perspective(500px) translateZ(200px);
}
</pre>

<h3 id="Result">Result</h3>

<p>{{EmbedLiveSample("Examples")}}</p>

Revert to this revision