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.

This is a Conditional Value field. Such fields allow you to specify values directly OR use a Formula to specify a value. Conditional values are useful for specifying different values for changing situations, such as varying device types or screen sizes.

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.

PreviousBorderNextFilter

Last updated