Scaling refers to the ability to increase or decrease an item by a factor. It is a useful little trick often used in animations. You may have encountered it when hovering your cursor over the items on a page. In this case, we can use scaling during the
hover event. Try hovering your mouse over the square in the following example:
We can use the
scale() function of the
transform property to scale the square, specifying one or two numbers as a value. There can 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 the
y-axis. We used only one value in the example above
- If you use two values, then you pass
x-axisscaling as the first value and the
y-axisscaling as the second one
If you try hovering in the last example, you notice that we scale the square and the text inside it. It is 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 to determine the range of possible values:
0 <= x < ∞.
In other words, the
scale() function takes a value from zero to infinity. If we scale the item to zero, we hide it. 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(2.1) and so on. It may not be a problem for most English-speaking users, but use a period (".") as a decimal point. Otherwise, you'll accidentally give two values — one for the
x-axis and the other for the
Although the example above looks simple enough, there are some points to keep in mind:
scale()function doesn't affect adjacent HTML elements. Let us try to remove the
transformproperty from the block with the
square blueclass. It will appear below the green block, exactly where it would have been without the
transformproperty. Essentially, the item behaves as if it had relative positioning
- By default, the green element was higher than the red. It is where the context of overlapping elements occurs, and what we see here is the same as when you use absolute positioning. We see the blocks below in HTML. By default, it will be positioned above in the overlapping context unless you specify otherwise with the
You can specify a negative value for any direction with 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. It will seem to disappear, although it will 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 it on the
Transformation point and scaling
scale, you can also set a transformation point with
Often it doesn't make much sense other than to use one of the four values:
So what happens when you use these values? As it happens, everything works as it should, so we change only the transformation point. But in the case of scaling, it's unclear what it means, so we use the property to control the element's position after the transformation.
Let's go back to the first example in the lesson:
scale(1.5) to the center block, so it slightly changed its position 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 we applied the transformation? It can be convenient for creating an animation because we know where the element will be.
It 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
- If you use two values, it sets the transformation point on the
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 vice versa, which is often the case when hovering over elements. In the following example, try hovering over the Subscribe icon:
Using the examples above, change the transformation points of the different elements. It will give you a good idea of how elements behave when we set the
transform-origin property to a specific value.
Are there any more questions? Ask them in the Discussion section.
The Hexlet support team or other students will answer you.
For full access to the course you need a professional subscription.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.