# rotateZ()

The `rotateZ()` CSS function defines a transformation that rotates an element around the z-axis without deforming it. Its result is a `<transform-function>` data type.

The axis of rotation passes through an origin, defined by the `transform-origin` CSS property.

Note: `rotateZ(a)` is equivalent to `rotate(a)` or `rotate3d(0, 0, 1, a)`.

Note: Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative. In other words, the order in which the rotations are applied impacts the result.

## Syntax

The amount of rotation created by `rotateZ()` is specified by an `<angle>`. If positive, the movement will be clockwise; if negative, it will be counter-clockwise.

``````rotateZ(a)
``````

### Values

`a`

Is an `<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 transformation applies to the 3D space and can't be represented on the plane. $\left(\begin{array}{ccc}cos\left(a\right)& -sin\left(a\right)& 0\\ sin\left(a\right)& cos\left(a\right)& 0\\ 0& 0& 1\end{array}\right)$ $\left(\begin{array}{cccc}cos\left(a\right)& -sin\left(a\right)& 0& 0\\ sin\left(a\right)& cos\left(a\right)& 0& 0\\ 0& 0& 1& 0\\ 0& 0& 0& 1\end{array}\right)$

## Examples

### HTML

``````<div>Normal</div>
<div class="rotated">Rotated</div>
``````

### CSS

``````div {
width: 80px;
height: 80px;
background-color: skyblue;
}

.rotated {
transform: rotateZ(45deg);
background-color: pink;
}
``````

## Browser compatibility

BCD tables only load in the browser