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.

Try it
------

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


```css
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


```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```


#### CSS


```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 to 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


```html
<div>Normal</div>
<div class="rotate">Rotated</div>
<div class="rotate-translate">Rotated + Translated</div>
<div class="translate-rotate">Translated + Rotated</div>
```


#### CSS


```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 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `transform` property
* `rotate` property
* `<transform-function>`
* `rotate3d()`