Rajat's Blog

transform property in CSS- part 1

transform property in CSS- part 1

Rajat Gupta's photo
Rajat Gupta
·

3 min read

Note: This is the first part of a 4 part series in which we'll understand the transform property of CSS.

In this part, we'll understand the value 'rotate' of the transform property but if you want to jump to any other function of the transform property, be my guest and click on the links provided below:

part 1: rotate

part 2: scale

part 3: translate

part 4: skew (yet to be published)

The transform property is most commonly used in animations as it allows us to do a ton of things such as moving an element, scaling it, rotating it etc.

There are 5 types of "rotate" in the transform property:

1. transform: rotate();
2. transform: rotateX();
3. transform: rotateY();
4. transform: rotateZ();
5. transform: rotate3d;

Let's understand them one by one by applying these values on the below👇code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            display: flex;
            justify-content: center;
            height: 100vh;
            align-items: center;
        }
        img{
            height: 120px;
            width: 250px;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <div>
        <img src="tiger.jpg" alt="">
    </div>
</body>
</html>

1.PNG

Note: Although I am applying these values on an image, you can do the same for any element (div, nav, p, h1 etc).

1. transform: rotate()

This property is used to rotate our element. Compared to the other rotate values, we'll use this value in 90% of the use cases. see the below example to understand:

img{
            height: 120px;
            width: 250px;
            object-fit: cover;
            transform: rotate(30deg);
        }

As you could see below 👇 our image gets rotated by 30 degrees.

2.PNG

Now, instead of "deg" we can also use the unit "turn" (0.25turn = 90deg). Before proceeding further have a look at the diagram below.

4.png

2. transform: rotateX()

Here the image will rotate along the x-axis. The top is getting away from us and the bottom is getting closer.

img{
            height: 120px;
            width: 250px;
            object-fit: cover;
            transform: rotateX(0.15turn);
        }

3.PNG

Let us see another example:

img{
            height: 120px;
            width: 250px;
            object-fit: cover;
            transform: rotateX(0.25turn);
        }

5.PNG

There is an image above👆, can you see it? and no, I can't because it gets rotated 90 degrees(0.25 turn) along the x-axis.

3. transform: rotateY()

Here the image will rotate along the y-axis. We can see the image getting skinnier as the left side of the image is getting closer and the right side is getting away from us.

img{
            height: 120px;
            width: 250px;
            object-fit: cover;
            transform: rotateY(0.15turn);
        }

6.PNG

4. transform: rotateZ()

Here the image will rotate along the z-axis. Therefore "transform: rotateZ()" = "transform: rotate". They both behave the same way.

5. transform: rotate3d()

This is quite confusing and difficult to use. I would recommend you to stick to the above four. Although as I said earlier we'll use "transform: rotate()" in 90% of our use cases.

If you have any doubt ask me in the comments section and I'll try to answer as soon as possible. Further, don't forget to check other functions of transform (links provided at the top)

I write articles related to web development. Follow me here if you are learning the same.

my Twitter handle: @therajatg

If you are the Linkedin type, let's connect: linkedin.com/in/therajatg

Have an awesome day ahead 😀!

CSS