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.

Difficulty: 2/10

Topics: CSS transforms, rotate(), units

Scenario Questions

0-2 years experience

1
You need to rotate an icon 90 degrees clockwise using CSS. How would you write the rule, and which unit would you use?
2
If you write transform: rotate(0.5); what will happen in the browser and why?

2-5 years experience

1
A component that uses rotate(45) stopped rotating after a recent refactor. Walk me through how you'd debug the issue.
2
When animating a spinner, you notice the rotation speed is inconsistent across browsers. How does the choice of unit (deg vs rad) affect this, and what would you choose?

5-8 years experience

1
Our design system defines rotation values in turn units for consistency, but many existing components use deg. How would you approach refactoring the codebase to adopt a single unit without breaking production?
2
Explain the performance implications, if any, of using rotate(0.5turn) versus rotate(180deg) in a high‑frequency animation on a page with thousands of elements.

8+ years experience

1
We are building a cross‑platform UI library that needs to generate CSS for both web and native (React Native) targets. How would you design an abstraction for rotation that handles unit differences and ensures maintainability across teams?
2
A legacy product uses custom JavaScript to compute rotation angles in radians and injects them into CSS. What strategy would you propose to migrate to a declarative CSS approach while minimizing risk and technical debt?

Follow-up Questions

❓What happens if you omit the unit in a rotate() call?
❓Which unit would you pick for a design system and why?
❓Are there any browser compatibility concerns with rad or turn units?