This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The rotate
CSS property allows you to specify rotation transforms individually and independantly of the transform
property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform
value.
/* Keyword values */ rotate: none; /* Angle value */ rotate: 90deg; rotate: 0.25turn; rotate: 1.57rad; /* x, y, or z axis name plus angle */ rotate: x 90deg; rotate: y 0.25turn; rotate: z 1.57rad; /* Vector plus angle value */ rotate: 1 1 1 90deg;
<angle>
specifying the angle to rotate the affected element through, around the Z axis. Equivalent to a rotate()
(2D rotation) function."x"
, "y
", or "z"
), plus an <angle>
specifying the angle to rotate the element through. Equivalent to a rotateX()
/rotateY()
/rotateZ()
(3D rotation) function.<number>
s representing an origin-centered vector that defines a line around which you want to rotate the element, plus an <angle>
specifying the angle to rotate the element through. Equivalent to a rotate3d()
(3D rotation) function.none
none | [ x | y | z | <number>{3} ]? && <angle>
<div> <p class="rotate">Rotation</p> </div>
* { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .rotate { transition: rotate 1s; } div:hover .rotate { rotate: 1 -0.5 1 180deg; }
Specification | Status | Comment |
---|---|---|
CSS Transforms Level 2 The definition of 'individual transforms' in that specification. | Editor's Draft | Initial definition. |
Initial value | none |
---|---|
Applies to | transformable elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | a transform |
Canonical order | per grammar |
Creates stacking context | yes |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | Yes | No | 60
|
No | No | No |
x, y, or z axis name plus angle value | Yes | No | No | No | No | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes | Yes | No | 60
|
No | No | Yes |
x, y, or z axis name plus angle value | Yes | Yes | No | No | No | No | Yes |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/rotate