rotate

rotate is an individual transform property, separate from the rotate() function inside transform. It rotates a transformable box around transform-origin.

Rotate a box 30 degrees

The square’s original holder remains unrotated. In this LTR demonstration, the positive z-axis rotation is clockwise.

<div class="stage">
  <div class="holder"><div class="square">Rotate</div></div>
</div>

.stage {
  padding: 2rem;
  background: #eff6ff;
  margin-block: 1rem;
}
.square {
  width: 70px;
  height: 50px;
  background: #2563eb;
  color: white;
  display: grid;
  place-items: center;
}
.holder {
  width: 70px;
  height: 50px;
  outline: 1px dashed #172554;
}
.square {
  rotate: 30deg;
}

Adjust rotation without clearing movement

The square keeps its translate value. Checking the box changes rotate alone, so the movement rule survives.

<input class="turn" id="turn" type="checkbox" /><label for="turn"
  >Rotate counterclockwise</label
>
<div class="stage"><div class="square">Rotate</div></div>

.stage {
  padding: 2rem;
  background: #eff6ff;
  margin-block: 1rem;
}
.square {
  width: 70px;
  height: 50px;
  background: #2563eb;
  color: white;
  display: grid;
  place-items: center;
}
.square {
  translate: 50px 0;
  rotate: 0deg;
}
.turn:checked ~ .stage .square {
  rotate: -30deg;
}

Values and defaults

The initial value is none and the property is not inherited. Use an angle such as 30deg, .25turn, or 1rad. An axis keyword can precede it, as in y 45deg; three unitless vector coordinates plus an angle define a 3D axis, as in 1 1 0 45deg. Perspective is a separate projection choice.

Individual translate/rotate/scale compose before transform in a defined order. Rotate:none clears only this individual rotation. Non-none values establish transform-related stacking/containing-block effects; zero is not identical to none for those effects.

Common mistakes

Transform:rotate(…) is a related function, not the syntax of this property. Rotation changes painting, not the normal-flow allocation. A block may overlap neighbors or be clipped. Keep essential text readable and support reduced-motion preferences if you animate rotation.

Learn transform-origin, transform, and perspective.

Sources and browser support

MDN: rotate describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.