Rotate

CSS rotate Property

The rotate property in CSS is utilized to rotate an element around a specified axis. It is used within the context of the transform property.

The rotate property's angle can be given in either degrees or radians.

• Degrees (deg): This unit describes the rotation angle in degrees. For instance, 90deg represents a quarter turn.

• Radians (rad): This unit represents the rotation angle in radians, where π rad equals 180 degrees.

Possible Values

Unit	Example	Description
deg	rotate: 90deg;	Rotates the element by degrees (90deg = quarter turn)
rad	rotate: 3.14rad;	Rotation in radians (π rad = 180°)

Examples of rotate Property with Diagrams

Example 1: 45 Degrees Rotation

An element rotated by 45 degrees clockwise:

+--------+
|        |
| Before |
|        |
+--------+
     ↓
    rotate: 45deg;
     ↓
   /--------/
  /        /
 /  After /
/________/

Example 2: 180 Degrees (π Radians) Rotation

An element rotated by 180 degrees clockwise:

+--------+
|        |
| Before |
|        |
+--------+
     ↓
    rotate: 180deg; // or rotate: 3.14rad;
     ↓
+--------+
|        |
| After  |
|        |
+--------+

These examples demonstrate how an element's appearance can change when the rotate property is applied using different angles.