CSS rotate

The CSS rotate() function is used to rotate an element in a 2D space. It takes an angle value as a parameter which specifies the amount of rotation. The element will be rotated clockwise by the specified angle.

The syntax for the rotate() function is as follows:

transform: rotate(angle);

Where angle can be specified in degrees, radians, gradians, or turns.

Here is an example of how to use the rotate() function:

In the example above, we are using the rotate() function to rotate a <div> element by 45 degrees.

It's important to note that when using the rotate() function, the transformed element will be rotated around its center by default. If you want to rotate the element around a different point, you can use the transform-origin property to specify the rotation point.

Here is an example of rotating an element around a specific point:

In the example above, we have specified the transform-origin property to rotate the <div> element around the top left corner.

Experiment with different angle values and transform origins to see how the rotate() function can be used to create interesting visual effects on elements in your web page!