What is the unit used in rotation?

Q: What is the unit used in rotation?

In CSS, rotation angles in the `rotate()` function are defined using **angle units**. These units determine how much an element is rotated clockwise or counterclockwise around its origin point. `deg` — degrees. A full circle equals 360deg (most commonly used). `rad` — radians. A full circle equals approximately 6.2832 radians (2π). `grad` — gradians. A full circle equals 400grads. `turn` — turns. A full circle equals 1turn. .box1 { transform: rotate(45deg); } /* 45 degrees */ .box2 { transform: rotate(0.25turn); } /* quarter turn */ .box3 { transform: rotate(1.57rad); } /* approx 90 degrees */ While all these units are valid, `deg` (degrees) is most widely used for simplicity and readability. Use positive angles for clockwise rotation and negative angles for counterclockwise rotation. You can animate between different rotation units using `transition` or `animation`.

Difficulty: 2/10

CSS transforms, rotate(), units

Units Used in CSS Rotation

In CSS, rotation angles in the rotate() function are defined using angle units. These units determine how much an element is rotated clockwise or counterclockwise around its origin point.

Supported Units for Rotation

1
deg — degrees. A full circle equals 360deg (most commonly used).
2
rad — radians. A full circle equals approximately 6.2832 radians (2π).
3
grad — gradians. A full circle equals 400grads.
4
turn — turns. A full circle equals 1turn.

Example: Using Different Rotation Units

While all these units are valid, deg (degrees) is most widely used for simplicity and readability.

Tip

1
Use positive angles for clockwise rotation and negative angles for counterclockwise rotation.
2
You can animate between different rotation units using transition or animation.

Scenario Questions

0-2 years experience

2-5 years experience

1A component that uses `rotate(45)` stopped rotating after a recent refactor. Walk me through how you'd debug the issue.

Follow-up Questions