rotate()
Quick Summary for rotate()
The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Its result is a <transform-function> data type.
Code Usage for rotate()
rotate(a) 
More Details for rotate()

rotate()

The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Its result is a <transform-function> data type.

The fixed point that the element rotates around — mentioned above — is also known as the transform origin. This defaults to the center of the element, but you can set your own custom transform origin using the transform-origin property.

Syntax

The amount of rotation created by rotate() is specified by an <angle>. If positive, the movement will be clockwise; if negative, it will be counter-clockwise. A rotation by 180° is called point reflection.

rotate(a) 

Values

a

Is an <angle> representing the angle of the rotation. The direction of rotation depends on the writing direction. In a left-to-right context, a positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. In a right-to-left context, a positive angle denotes a counter-clockwise rotation, a negative angle a clockwise one.

Cartesian coordinates on ℝ^2 Homogeneous coordinates on ℝℙ^2 Cartesian coordinates on ℝ^3 Homogeneous coordinates on ℝℙ^3
( cos ( a ) - sin ( a ) sin ( a ) cos ( a ) ) ( cos ( a ) - sin ( a ) 0 sin ( a ) cos ( a ) 0 0 0 1 ) ( cos ( a ) - sin ( a ) 0 sin ( a ) cos ( a ) 0 0 0 1 ) ( cos ( a ) - sin ( a ) 0 0 sin ( a ) cos ( a ) 0 0 0 0 1 0 0 0 0 1 )
[cos(a) sin(a) -sin(a) cos(a) 0 0]

Examples

Basic example

HTML
<div>Normal</div> <div class="rotated">Rotated</div> 
CSS
div {   width: 80px;   height: 80px;   background-color: skyblue; }  .rotated {   transform: rotate(45deg); /* Equal to rotateZ(45deg) */   background-color: pink; } 
Result

Combining rotation with another transformation

If you want apply multiple transformations to an element, be careful about the order in which you specify your transformations. For example, if you rotate before translating, the translation will be along the new axis of rotation!

HTML
<div>Normal</div> <div class="rotate">Rotated</div> <div class="rotate-translate">Rotated + Translated</div> <div class="translate-rotate">Translated + Rotated</div> 
CSS
div {   position: absolute;   left: 40px;   top: 40px;   width: 100px;   height: 100px;   background-color: lightgray; }  .rotate {   background-color: transparent;   outline: 2px dashed;   transform: rotate(45deg); }  .rotate-translate {   background-color: pink;   transform: rotate(45deg) translateX(180px); }  .translate-rotate {   background-color: gold;   transform: translateX(180px) rotate(45deg); } 
Result

Specifications

Specification
CSS Transforms Module Level 1 # funcdef-transform-rotate

See also

transform <transform-function> rotate3d()

Last modified: Jan 31, 2022, by MDN contributors

Select your preferred language English (US)EspañolFrançais日本語Português (do Brasil)Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote

is backupper a word?
anytrans
Random CSS Property

:last-child

The :last-child CSS pseudo-class represents the last element among a group of sibling elements.
:last-child css reference