rotate() CSS Function

Description

The CSS rotate() function is used to rotate an element around a fixed point on the 2D plane, without deforming it. The amount of rotation is specified by an angle, which can be given in degrees, gradians, radians, or turns. Positive angles rotate the element clockwise, while negative angles rotate it counterclockwise.

The rotate() function can be used on any HTML element, but it is most commonly used on images, text, and shapes. It can be used to create a variety of effects, such as rotating a logo, tilting a text heading, or creating a spinning animation.

To use the rotate() function, simply add it to the transform property of the element you want to rotate. The value of the transform property should be a list of one or more transformation functions, separated by spaces. For example, to rotate an element 90 degrees clockwise, you would use the following CSS:

div {
  transform: rotate(90deg);
}

You can also use the rotate() function to rotate an element around a specific point. To do this, you need to use the rotate() function within a translate() function. The translate() function moves the element to a new position, and the rotate() function rotates it around that new position.

For example, to rotate an element 90 degrees clockwise around its center, you would use the following CSS:

div {
  transform: translate(-50%, -50%) rotate(90deg);
}

The -50% values in the translate() function move the element to its center, and the rotate(90deg) function rotates it 90 degrees clockwise around that center.

Syntax

transform: rotate(<angle>);

Values

<angle>A positive value rotates the element clockwise, a negative value rotates the element counter clockwise.

Example

HTML

<div class="normal rotated">Rotated</div>

<div class="normal">Not rotated</div>

CSS

.normal {

    padding: 20px;

    margin: 20px;

    width: 120px;

    background: #546D62;

    color: white;

    font-family: sans-serif;

}

.rotated {

    transform: rotate(45deg);

}

Result

Editor