<pre class="brush: css notranslate"><code><span class="token comment">/ Keyword values /</span> <span class="token property">rotate</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token comment">/ Angle value /</span> <span class="token property">rotate</span><span class="token punctuation">:</span> 90deg<span class="token punctuation">;</span> <span class="token property">rotate</span><span class="token punctuation">:</span> 0.25turn<span class="token punctuation">;</span> <span class="token property">rotate</span><span class="token punctuation">:</span> 1.57rad<span class="token punctuation">;</span> <span class="token comment">/ x, y, or z axis name plus angle /</span> <span class="token property">rotate</span><span class="token punctuation">:</span> x 90deg<span class="token punctuation">;</span> <span class="token property">rotate</span><span class="token punctuation">:</span> y 0.25turn<span class="token punctuation">;</span> <span class="token property">rotate</span><span class="token punctuation">:</span> z 1.57rad<span class="token punctuation">;</span> <span class="token comment">/ Vector plus angle value /</span> <span class="token property">rotate</span><span class="token punctuation">:</span> 1 1 1 90deg<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">rotate</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">rotate</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">rotate</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">rotate</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>

rotate

The rotate CSS property allows you to specify rotation transforms individually and independently 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 property.

Syntax

/* 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;  /* Global values */ rotate: inherit; rotate: initial; rotate: revert; rotate: unset; 

Values

An <angle> specifying the angle to rotate the affected element through, around the Z axis. Equivalent to a rotate() (2D rotation) function.

The name of the axis you want to rotate the affected element around ("x", "y", or "z"), plus an <angle> specifying the angle to rotate the element through. Equivalent to a rotateX()/rotateY()/rotateZ() (3D rotation) function.

Three <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.

Specifies that no rotation should be applied.

Formal definition

Formal syntax

none | <angle> | [ x | y | z | <number>{3} ] && <angle>

Examples

Rotate an element on hover

<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; } 

Specifications

See also

Note: skew is not an independent transform value