# rotate()

The `rotate()` CSS function defines a transformation that moves the element around a fixed point (as specified by the `transform-origin` property) 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. A rotation by 180° is called point reflection.

## Syntax

```rotate(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
$\left(\begin{array}{cc}cos\left(a\right)& -sin\left(a\right)\\ sin\left(a\right)& cos\left(a\right)\end{array}\right)$ $\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}{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)$
`[cos(a) sin(a) -sin(a) cos(a) 0 0]`

## Examples

### HTML

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

### CSS

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

.transformed{
/* identical to rotateZ(45deg); */
transform: rotate(45deg);
background-color: blue;
}
```

Tags: