## What are rotations?

Rotation is the **turning of elements round a pivotal point through a given angle**.

Even if you don't understand this definition on rotation, you already know it. We all know about rotation and have used it in some way or other at some point in our *computer* lives - while preparing a project for school, or a lecture for students, or an animation and so on. Whatever it is the main point is that rotation isn't something new at all!

In CSS transformations, the `rotate()`

function is used to rotate objects **round the way we are most familiar with**. Like we need to specify pixel `px`

values in translations, rotations require us to give angle values. They can be in degrees `deg`

, radians `rad`

, gradians `grad`

, 360 degree turns `turn`

and so on.

You'll shortly see what we mean by this. Although `rotate()`

usually does much of the job there are other rotation functions available too.

`rotateX()`

and `rotateY()`

rotate elements round the x- and y-axis respectively. These rotations, although, are around the 2D axes, the rotative behaviour works in 3D. You might be able to understand what is meant by *rotate around the x-axis* - if you do then you won't have a hard time understanding these rotations.

Fortunately, if you don't, even then you won't have a hard time getting the hang of anything. After all this ain't rocket science!

So let's cross the limits of text - and into examples we go!

## Rotations we all know - rotate()

Following we have a `div`

element shown in its initial style (as a reference):

Now let's rotate this div round an angle of **20 degrees** forwards using `rotate()`

:

```
div {
transform: rotate(20deg);
}
```

As you can see from the example above, this type of rotation is the one *we all know about* - **rotation in the 2D plane**. There is rotation in the 3D plane too as we will see below.

We can also specify **negative values** in which case the rotation will go backwards.

```
div {
transform: rotate(-20deg);
}
```

## Exploring other units

Let's even try some other angle units apart from degrees. Follow along each example.

1 **radian** `rad`

is equivalent of 180 degrees / π.

```
div {
transform: rotate(3.142rad); /* same as 180deg */
}
```

1 **gradian** `grad`

is equivalent of 1/400th of a turn and 9/10th of a degree;.

```
div {
transform: rotate(200grad); /* same as 180deg */
}
```

CSS unit `turn`

is equivalent of **360 degree rotation** (a complete *turn*).

```
div {
transform: rotate(0.5turn); /* same as 180deg */
}
```

**should rotate the div by 180 degrees**. If you somehow don't get this expected rotation then the corresponding unit might not be supported on your browser.

## Rotate round the x-axis

*Rotation around the x-axis* means that an element is **rotated such that the points on the axis remain unchanged** (think of a sheet on the x-axis rotating around it).

First take a look at the initial style:

And now over to the one rotated by **45 degrees** round the x-axis:

```
div {
transform: rotateX(45deg);
}
```

## Rotate round the y-axis

*Rotation around the y-axis* means that an element is **rotated such that the points on the y-axis remain unchanged** (think of a sheet on the y-axis rotating around it).

First take a look at the initial style:

And now over to the one rotated by **45 degrees** round the y-axis:

```
div {
transform: rotateY(45deg);
}
```