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):

Div

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

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

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

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 */
}
Div

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

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

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

div {
    transform: rotate(0.5turn); /* same as 180deg */
}
Div
All of the above examples demonstrating different angle units in CSS, 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:

Div

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

div {
    transform: rotateX(45deg);
}
Div
If you can picture 3D in your head, you will surely be able to picture this as well. Remember that the x-axis is layed horizontally, and y-axis vertically on a document.

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:

Div

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

div {
    transform: rotateY(45deg);
}
Div
If you can picture 3D in your head, you will surely be able to picture this as well. Remember that the x-axis is layed horizontally, and y-axis vertically on a document.