rotate() CSS function
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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.
Try it
transform: rotate(0);
transform: rotate(90deg);
transform: rotate(-0.25turn);
transform: rotate(3.142rad);
<section id="default-example">
<img class="transition-all" id="example-element" src="../../../../../../../shared-assets/images/examples/firefox-logo.svg" width="200">
</section>
The fixed point that the element rotates around — mentioned above — is also known as the transform
origin. This defaults to the center of the element, but you can set your own custom transform origin using
the transform-origin property.
Syntax
rotate(a)
Values
- a
-
Is an
<angle>representing the angle of the rotation. The direction of rotation depends on the writing direction. In a left-to-right context, a positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. In a right-to-left context, a positive angle denotes a counter-clockwise rotation, a negative angle a clockwise one. A rotation by 180° is called point reflection.
| 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] |
Formal syntax
<rotate()> =
rotate( [ <angle> | <zero> ] )
Examples
Basic example
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
Combining rotation with another transformation
If you want to apply multiple transformations to an element, be careful about the order in which you specify your transformations. For example, if you rotate before translating, the translation will be along the new axis of rotation!
HTML
<div>Normal</div>
<div class="rotate">Rotated</div>
<div class="rotate-translate">Rotated + Translated</div>
<div class="translate-rotate">Translated + Rotated</div>
CSS
div {
position: absolute;
left: 40px;
top: 40px;
width: 100px;
height: 100px;
background-color: lightgray;
}
.rotate {
background-color: transparent;
outline: 2px dashed;
transform: rotate(45deg);
}
.rotate-translate {
background-color: pink;
transform: rotate(45deg) translateX(180px);
}
.translate-rotate {
background-color: gold;
transform: translateX(180px) rotate(45deg);
}
Result
Specifications
| Specification |
|---|
| CSS Transforms Module Level 1 # funcdef-transform-rotate |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
rotate()
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
See also
transformpropertyrotateproperty<transform-function>rotate3d()