Rotate Property
Last updated: 2026-09-13
rotate Rotate Property
The rotate property is an individual transform property that rotates an element around a specified axis in 2D or 3D space. As a standalone property it can be controlled separately from other transforms such as translate and scale, which is especially useful when you want to animate the rotation angle on its own.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
rotate: none | <angle> | [ x | y | z | <number>{3} ] <angle>;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | Keyword | No rotation |
<angle> | Type | The rotation angle |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| rotate | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： When no axis is given, the element rotates around the Z axis (perpendicular to the screen). You can specify the x, y, or z axis, or a custom vector, for 3D rotation.
Tip： Positive values rotate clockwise when looking along the axis in its positive direction; negative values rotate counterclockwise.
❓ FAQ
QHow do I make an element swing back and forth instead of spinning continuously?
APlay the animation alternately in both directions: use animation-direction: alternate and write two keyframes, such as rotate: -10deg at the from frame and rotate: 10deg at the to frame. When only the to frame is written, the 0% frame automatically uses the element's initial state. You can also toggle a class with JavaScript combined with a transition.
QIs the rotate property the same as transform: rotate() in CSS?
AVisually they are identical — both rotate around the specified axis. The difference is that the standalone rotate property can be animated on its own without affecting the translate, scale, or other transforms already in transform, which is convenient for controlling each dimension separately. transform: rotate() must be written in the same list as the other transform functions, and the order of the list matters when you change it.
QWhat rotation axes does rotate support? How do I rotate around X or Y?
AWith no axis written, rotation defaults to the Z axis (perpendicular to the screen), equivalent to rotateZ. Use rotate: x 45deg for the X axis, rotate: y 45deg for the Y axis, or a custom vector such as rotate: 1 1 0 45deg. Rotations around X or Y need a perspective on the parent element to show real depth.
QDoes rotate support negative angles or angles beyond 360 degrees?
AYes. rotate: -45deg rotates 45 degrees counterclockwise, and a value above 360deg such as 720deg shows two full turns during an animation. Angles accept deg, grad, rad, and turn units — 0.25turn equals 90deg. Note that in static styles 360deg and 0deg look the same, but in an animation the full rotation is rendered.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
