CSS rotate Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

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

HTML

<div class="box" id="box1">rotate Z</div>

<div class="box" id="box2">rotate Y</div>

<div class="box" id="box3">vector & angle</div>

CSS

.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;
}

Result

Editor