CSS 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 behavior 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!

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

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

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

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