CSS rotate Property

Description

The rotate CSS property allows you to rotate an element around its origin. The rotation is specified in degrees, gradians, radians, or turns. A positive value will rotate the element clockwise, while a negative value will rotate it counter-clockwise. The rotate property can be used to create a variety of effects, such as rotating an image, arrow, or text. It can also be used to create more complex effects, such as rotating a 3D object or creating a carousel.

Initial value
none
Applies to
transformable elements
Inherited
no
Computed value
as specified
Animatable
a transform
JavaScript syntax
object.style.rotate

Interactive Demo

1
2
3
4
5
6

Syntax

rotate: none | axis | angle | vector angle

Values

  • noneSpecifies that no rotation should be applied.
  • axisOptional. If not set, z-axis is default. Defines axis to rotate element around. Possible values: x, y, z
  • angleDefines how much an element is rotated. Possible units: deg, rad, turn
  • vector angleThree numbers define a vector for the element to be rotated around. The numbers are x-, y- and z-coordinates for the vector, respectively. The last value is the angle for how much to rotate. Possible values: number, number, number, angle

Example

<div class="box" id="box1">rotate Z</div>
<div class="box" id="box2">rotate Y</div>
<div class="box" id="box3">vector & angle</div>
.box {
  display: inline-block;
  margin: 1em;
  min-width: 6.5em;
  line-height: 6.5em;
  text-align: center;
  transition: 1s ease-in-out;
  border: 0.25em dotted;
}

#box1:hover {
  rotate: 90deg;
}

#box2:hover {
  rotate: y 180deg;
}

#box3:hover {
  rotate: 1 2 1 360deg;
}

Browser Support

The following table will show you the current browser support for the CSS rotate property.

Desktop
Edge Chrome Firefox Opera Safari
104104729014.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
104797114.520104

Last updated by CSSPortal on: 3rd January 2024