Rotate Transform

The rotate() function spins an element around a point. By default, it rotates around the center. You can rotate clockwise or counterclockwise using positive or negative degrees. It is one of the most straightforward transforms to learn.

Basic Rotation

Apply rotation using the transform property. The value is the angle you want to rotate by. Positive values rotate clockwise, negative values rotate counterclockwise.

.rotated {
  transform: rotate(45deg);
}

.tilted-left {
  transform: rotate(-15deg);
}

.half-turn {
  transform: rotate(180deg);
}
    

A full rotation is 360 degrees. Common values are 90deg, 180deg, and 270deg. You can also use fractional values like 12.5deg for precise angles.

Changing the Rotation Origin

By default, elements rotate around their center. You can change this with transform-origin. This property accepts keywords like top left, bottom center, or specific pixel/percentage values.

.rotate-from-corner {
  transform-origin: top left;
  transform: rotate(15deg);
}

.rotate-from-bottom {
  transform-origin: 50% 100%;
  transform: rotate(-10deg);
}
    

Changing the origin is essential for animations. For example, a door swinging open rotates from the hinge (left edge), not from the center.

Rotating on Hover

Combine rotation with transitions for smooth spinning effects. This is popular for loading indicators, icons, and interactive elements.

.spin-button {
  transition: transform 0.3s ease;
}

.spin-button:hover {
  transform: rotate(360deg);
}

.gear {
  transition: transform 2s linear;
}

.gear:hover {
  transform: rotate(360deg);
}
    

The transition makes the rotation animate smoothly. Use linear timing for mechanical-looking rotations, or ease for more natural-feeling movement.