Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 1131059 of rotateZ()

  • Revision slug: Web/CSS/transform-function/rotateZ
  • Revision title: rotateZ()
  • Revision id: 1131059
  • Created:
  • Creator: Sebastianz
  • Is current revision? Yes
  • Comment

Revision Content

{{CSSRef}}

The rotateZ() CSS function defines a transformation that moves the element around the z-axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.

The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.

rotateZ(a)is a shorthand for rotate3D(0, 0, 1, a).

In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.

Syntax

rotateZ(a)

Values

a
Is an {{ cssxref("<angle>") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.
Cartesian coordinates on ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3
This transform applies to the 3D space and cannot be represented on the plane. cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001

Examples

HTML

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

CSS

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

.transformed{
  transform: rotateZ(45deg);
  background-color: blue;
}

Result

{{EmbedLiveSample("Examples","100%","200")}}

Revision Source

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

<p>The <strong><code>rotateZ()</code></strong> CSS function defines a transformation that moves the element around the z-axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.</p>

<p>The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</p>

<p><code>rotateZ(a)</code>is a shorthand for <code>rotate3D(0, 0, 1, a)</code>.</p>

<div class="note">In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.</div>

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

<pre class="syntaxbox">
rotateZ(<em>a</em>)
</pre>

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

<dl>
 <dt><em>a</em></dt>
 <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</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"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</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><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>01</mtd><mtd>0</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{
  transform: rotateZ(45deg);
  background-color: blue;
}
</pre>

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

<p>{{EmbedLiveSample("Examples","100%","200")}}</p>
Revert to this revision