“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.
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:
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.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.
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:
Let's use these values and state that the central block must have a transformation point like so:
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.
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..
The Hexlet support team or other students will answer you.
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.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
From a novice to a developer. Get a job or your money back!
Sign up or sign in
Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.