/CSS

# rotate()

The `rotate()` CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, 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.

## Syntax

The amount of rotation created by `rotate()` is specified by an `<angle>`. If positive, the movement will be clockwise; if negative, it will be counter-clockwise. A rotation by 180° is called point reflection.

```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

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

### CSS

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

.rotated {
transform: rotate(45deg); /* Equal to rotateZ(45deg) */
background-color: pink;
}
```

## Browser compatibility

Please see the `<transform-function>` data type for compatibility info.