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 |
---|---|---|---|
[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; }
Result
Browser compatibility
Please see the <transform-function>
data type for compatibility info.