rotate()

The rotate() CSS function is used to apply a 2D rotation to an element. It takes a single argument, which specifies the angle of rotation. This angle can be expressed in degrees, radians, or gradians.

Syntax

transform: rotate(angle);

Where:

• angle: The angle of rotation. Positive values rotate counter-clockwise, while negative values rotate clockwise.

Examples

Rotating 45 degrees counter-clockwise

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

Rotating 90 degrees clockwise

.element {
  transform: rotate(-90deg);
}

Rotating 1.57 radians counter-clockwise (equivalent to 90 degrees)

.element {
  transform: rotate(1.57rad);
}

Rotating 100 gradians counter-clockwise (equivalent to 90 degrees)

.element {
  transform: rotate(100grad);
}

Additional Considerations

• Combining with Other Transformations: You can combine rotate() with other CSS transformations like translate(), scale(), and skew() using the transform property. For example:

.element {
  transform: rotate(45deg) translate(50px, 50px);
}

• Transform Origin: The transform-origin property specifies the point around which the rotation occurs. By default, it’s set to 50% 50%, meaning the center of the element. You can change this to rotate around a different point:

.element {
  transform: rotate(45deg);
  transform-origin: left top;
}

• Browser Compatibility: rotate() is widely supported across modern browsers. However, for older browsers, you might need to use vendor prefixes like -webkit-rotate, -moz-rotate, and -ms-rotate.

Key Points

• rotate() is a powerful tool for creating dynamic and visually interesting effects.
• The angle argument can be expressed in degrees, radians, or gradians.
• The transform-origin property controls the rotation point.
• Combine rotate() with other transformations for complex effects.

Live Demo

See the Pen Rotate by Ballajack (@Ballajack) on CodePen.