The rotate() CSS function is a transformation function used to rotate an element around a fixed point on the 2D plane. This function is part of the broader transform property, which allows you to apply various visual transformations such as scaling, translating, and skewing to elements. By default, rotate() rotates the element around its origin point, which can be modified using the transform-origin property.

The value of rotate() is an angle, typically specified in degrees (deg), radians (rad), turns (turn), or gradians (grad). Positive angles rotate the element clockwise, while negative angles rotate it counterclockwise. For example, rotate(45deg) will turn an element 45 degrees clockwise.

A common use case is rotating div elements for decorative effects or interactive UI components. Combined with other functions like scale() or translate(), it enables complex visual animations.

Example:

.box {
  width: 100px;
  height: 100px;
  background-color: coral;
  transform: rotate(30deg);
}

In this example, the .box element is rotated 30 degrees clockwise around its center. Adjusting the transform-origin allows rotation around different points, such as a corner or a custom offset.

rotate() is particularly useful in animations, hover effects, and interactive graphics, making it a fundamental tool in modern web design.