2D transformations. Scaling — CSS: Transform (Transform objects)

“Scaling” refers to the ability to increase or decrease an item by a certain factor. This is a useful little trick that's used very often in animations. You may have encountered it when hovering your cursor over an item on a page. In this case, scaling is used during the hover event. Try hovering your mouse over the square in the following example:

The scale() function of the transform property was used to scale the square. One or two numbers can be specified as a value. There can, in fact, be three numbers, but we'll talk more about that in the lesson about scaling in 3D.

• If you use one value, it scales by the same factor on both the x-axis and the y-axis. Only one value was used in the example above.
• If you use two values, the x-axis scaling is passed as the first value, and the y-axis scaling is passed as the second argument.

But what exactly is being scaled? If you tried hovering in the last example, you noticed that not only was the square itself scaled, but also the text inside it. This is exactly what will happen: the scale() function affects everything inside the block and the block itself.

The default value of scale() is one. You can think of values as percentages, where one equals 100%. Thus, it's easy enough to determine the range of possible values: 0 <= x < ∞. Or, in other words, the scale() function takes a value from zero to infinity. If the item gets scaled to zero, it will simply be hidden. We can enlarge the object to absolutely any size. But we don't usually do that here :)

Any value less than one shrinks the element, and greater than one makes it bigger. Note that the number does not have to be an integer. The values can be: scale(1.2), scale(0.3), scale(2.1) and so on. This may not be a problem for most English-speaking users, but make sure to use a period (".") as a decimal point, otherwise you'll accidentally give two different values; one for the x-axis and one for the y-axis.

Although the example above looks simple enough, there are some important points to keep in mind:

1. The scale() function doesn't affect adjacent HTML elements. Try removing the transform property from the block with the square blue class. You'll see it appear below the green block, exactly where it would have been without the transform property. Essentially, the item behaves as if it had relative positioning.
2. By default, the green element was higher than the red. This is where the context of overlapping elements occurs, and what we see here is the same as when you use absolute positioning. The blocks below shown in HTML will, by default, be positioned above in the overlapping context unless you specify otherwise with the z-index property.

In fact, you can specify a negative value for any direction when using the scale function. But what good would that do? Imagine what happens to an element when its x-axis scaling tends to zero. The element begins to flatten more and more, until the value is zero. The element will seem to disappear, although it will actually continue to exist. If you give a negative value now, the element will grow, but in what direction? Yep, in the opposite direction. So we'll see the element as if we were behind it, or more simply, we'll mirror the element on the x-axis.

Transformation point and scaling

When using scale, you can also set a transformation point using transform-origin.

Often it, doesn't make much sense other than to use one of the four standard values:

• top
• right
• bottom
• left

So what happens when you use these values? As it happens, everything will work the way it should, we'll just change the point of transformation. But in the case of scaling, it's not very clear what it means, so the property is often used to control the location of the element after transformation.

Let's go back to the first example in the lesson:

After applying scale(1.5) to the center block, it changed its position slightly, as it transformed from the center point of the element. It was from there that the increase in size came. But what if we want to enlarge the item but leave the upper-left point where it would have been before the transformation was applied? This can be very useful when creating an animation, as we're sure about where the element will be located.

This is where the transform-origin property comes in handy. As mentioned in the previous lessons, it can take one or more values:

• If you use one value, it sets the transformation point on the x-axis.
• If you use two values, it sets the transformation point on the x and y-axes.

Let's use these values and state that the central block must have a transformation point like so:

• On the x-axis the transformation point must be on the left
• On the y-axis the transformation point must be at the top

So the transformation point will be the upper-left corner, which means that it'll scale from this point, preventing it from moving:

Using the transform-origin property allows the element to appear from left to right (or backwarsds), as is often the case when hovering over an element. In the following example, try hovering your mouse over the "Subscribe" icon.

Additional assignment

Using the examples above, change the transformation points of the different elements. Get a good idea of how the element will behave when the transform-origin property is set to a certain value..

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.