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

Result