transform property in CSS- part 2

Note: This is the second part of a 5 part series dedicated to the transform property of CSS.

In this part, we'll understand the value 'scale' 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: this is not of any use for 2d elements. Hence, I am skipping it as of now.

part 5: made badge component using translate

Let's get started:

Let's see what MDN has to say: The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. Its result is a data type.

The scale() is used to scale (increase and decrease both) the length of an element across the X, Y, and Z-axis but since here we are dealing with 2D objects, I'll show you how to scale elements in the x and y direction using this property.

Let's make a red div (or box) to understand the scale() in transform:

 div{
            height: 100px;
            width: 100px;
            background-color: red;
            border: 1px solid black;
        }

(1) In the below example we applied (transform: scale(3)) on the div and length of the box across both x and y-axis has become 3 times the previous length.

div{
            height: 100px;
            width: 100px;
            background-color: red;
            border: 1px solid black;
            transform: scale(3);
        }

(2) Instead of giving only one value (transform: scale(3)), we can provide two values one for the x-axis and another one for the y-axis. see the example below:

div{
            height: 100px;
            width: 100px;
            background-color: red;
            border: 1px solid black;
            transform: scale(4, 0.5);
        }

☝️Here, the length of the box along the x-axis has become 4 times and it has halved along the y-axis.

(3) If we want to scale length only across one direction we can use either scaleX or scaleY (depending on the direction we want to scale)

div{
            height: 100px;
            width: 100px;
            background-color: red;
            border: 1px solid black;
            transform: scaleX(4)
        }

☝️ here the length along the x-axis has become 4 times the previous length. However, there is no change across the y-axis.

Frankly, the scale() function is quite straightforward but if you still have any doubt, feel free to ask in the comments section and do not forget to check other functions of transform (link at the top).

I write one article every day related to web development (yes, every single f*cking day). Follow me here if you are learning the same..

my Twitter handle: @therajatg

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

Have an awesome day ahead 😀!