You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

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 source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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

CSS property.

**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(a)& -sin(a)& 0\\ sin(a)& cos(a)& 0\\ 0& 0& 1\end{array}\right)$ | $\left(\begin{array}{cccc}cos(a)& -sin(a)& 0& 0\\ sin(a)& cos(a)& 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; }

### Result

## Specifications

Specification | Status | Comment |
---|---|---|

CSS Transforms Level 2 The definition of 'rotateZ()' in that specification. |
Editor's Draft | Initial definition |

## Browser compatibility

Please see the `<transform-function>`

data type for compatibility info.