Definition
The rotate CSS transformation function is used to rotate an element clockwise or counterclockwise around a specified point. It allows you to apply a rotational transformation to an element, changing its orientation or creating animated effects.
The rotate function accepts a single parameter, which specifies the angle of rotation in degrees. Positive values rotate the element clockwise, while negative values rotate it counterclockwise.
Here’s an example:
.rotate-element {
transform: rotate(45deg);
}
In this example, the .rotate-element class applies a rotation transformation of 45 degrees to the element. It will rotate the element 45 degrees clockwise.
You can also use other CSS properties, such as transform-origin, to specify the rotation origin or adjust the center point around which the element is rotated. Here’s an example:
.rotate-element {
transform: rotate(90deg);
transform-origin: center center;
}
In this example, the .rotate-element class applies a rotation of 90 degrees to the element and sets the transform-origin to the center of the element. This will rotate the element 90 degrees clockwise around its center.
The rotate transformation is commonly used in combination with other CSS transformations, such as scale and translate, to create complex and interactive visual effects. It can be applied to any HTML element and is particularly useful for creating animated rotations or adjusting the orientation of elements within a layout.