Therotate()CSSfunction defines a transformation that rotates an element around afixed point on the 2D plane, without deforming it. Its result is a<transform-function> datatype.

Try it

transform: rotate(0);

transform: rotate(90deg);

transform: rotate(-0.25turn);

transform: rotate(3.142rad);

<section>  <img          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 thetransformorigin. This defaults to the center of the element, but you can set your own custom transform origin usingthetransform-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 calledpoint reflection.

Formal syntax

<rotate()> =
rotate([<angle>|<zero>])

Examples

Basic example

HTML

<div>Normal</div><div>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 yourtransformations. For example, if you rotate before translating, the translation will be along the new axis ofrotation!

HTML

<div>Normal</div><div>Rotated</div><div>Rotated + Translated</div><div>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

Browser compatibility

See also

• transform property
• rotate property
• <transform-function>
• rotate3d()