por The process of designing a web page almost always involves modifying the properties of the elements so that their appearance changes. One way to do this is to use the transform properties available in CSS, such as the property scale of CSS. In this post, We will explain how this property works, one of the basic CSS transformations.
How does the CSS scale property work?
The property scale CSS is part of the transformation functions that exist in CSS in the 2D plane. As the name suggests, It allows us to literally «scale» the size of an element on our website. To use the scale function, simply insert the property transform:scale and the value by which we want to multiply the size in parentheses, in such a way scale (value).
Like the other transform properties in CSS, the property scale CSS has several properties under its name, which allow us to alter the scale of an element by separating the different axes. Below we explain how these options work:
scaleX
This property allows you to alter the scale of the element only on the X axis. This means that with scaleX We multiply only the width of the element, since it is the one that is on its horizontal axis.
scaleY
ScaleY defines the size of an element on its axis That is, it allows Let’s take the value of your height as a reference to change your size. Write, for example, transform: scaleY (3) This means that the original height of the element will be multiplied by three.
scale
The property scalelike the other transformation functions that have a single name: transform rotatetransform translate, transform skew), allows us to join the values of properties that only dominate one axis. With this function we can write two values in a single line of code.
The first value will represent the scale on the X axis (the change in width), while the second value will represent the scale on the Y axis (the change in height). If we wrote only one value, it would represent the scale on the X axis.
We leave you an example so that you know better how to apply this function in CSS:
.scaled { transform: scale(0.5); /* Same as: scaleX (0.5) scaleY (0.5) */ background-color: red; }
In this way, the object that we want to scale is governed by the dimensions that we have established, in this case scaling to 0.5, with X and Y at the same time.
What do we use the property for? scale CSS?
Like the other transformations, the property scale CSS is not only used to alter the size of an element, but also to create a different state on the same element. This means that we can have an element that starts out small, but then reaches its final size, thanks to the use of the transformation property scale along with CSS transitions.
Do you want to continue learning?
After reading this post you know how to use the property scale of CSS to resize your elements and create the illusion of movement on a web page. Now, It’s time to create and design your own website with moving elements! At we know that incorporating dynamism into a web page is not easy and there may still be tools that you should know before starting to do it.
For this reason, we invite you to continue learning with us in our Full Stack Web Development Bootcamp. In this intensive training, you will not only continue to learn about the properties that CSS and HTML have to offer, but you will also explore them in your own lines of code. That’s how it is, During the bootcamp you will create and design your own website! What are you waiting for to join? Sign up now!