## 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 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!

## 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.
{"ft_lang_label":"__label__en","ft_lang_prob":0.8844834,"math_prob":0.95722204,"size":3038,"snap":"2022-40-2023-06","text_gpt3_token_len":717,"char_repetition_ratio":0.15754779,"word_repetition_ratio":0.13653137,"special_character_ratio":0.2481896,"punctuation_ratio":0.104132235,"nsfw_num_words":0,"has_unicode_error":false,"math_prob_llama3":0.98716927,"pos_list":[0],"im_url_duplicate_count":[null],"WARC_HEADER":"{\"WARC-Type\":\"response\",\"WARC-Date\":\"2022-10-03T22:05:39Z\",\"WARC-Record-ID\":\"<urn:uuid:5cdf947e-e1b0-4bd4-95a0-1494f891586c>\",\"Content-Length\":\"35048\",\"Content-Type\":\"application/http; msgtype=response\",\"WARC-Warcinfo-ID\":\"<urn:uuid:16b84f19-be66-451b-a77e-cdddc1d52119>\",\"WARC-Concurrent-To\":\"<urn:uuid:58f0d875-4699-40be-ad9c-c4d0b794e01c>\",\"WARC-IP-Address\":\"172.67.217.22\",\"WARC-Target-URI\":\"https://www.codeguage.com/courses/css/transformations-rotation\",\"WARC-Payload-Digest\":\"sha1:LYLVMX4OWSHG6IH3L7J24EWZDZI7DWQ5\",\"WARC-Block-Digest\":\"sha1:2VS6WOZJVLRNGKMX74WSIAFIPQ375YGE\",\"WARC-Identified-Payload-Type\":\"text/html\",\"warc_filename\":\"/cc_download/warc_2022/CC-MAIN-2022-40/CC-MAIN-2022-40_segments_1664030337432.78_warc_CC-MAIN-20221003200326-20221003230326-00067.warc.gz\"}"}