Register to get access to free programming courses with interactive exercises

# 2D transformations and scaling —CSS: Transform (Transform objects)

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 `x-axis` and the `y-axis`. We used only one value in the example above
• If you use two values, then you pass `x-axis` scaling as the first value and the `y-axis` scaling 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(1.2)`, `scale(0.3)`, `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 `y-axis`:

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

1. The `scale()` function doesn't affect adjacent HTML elements. Let us try to remove the `transform` property from the block with the `square blue` class. It will 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. 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 `z-index` property

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 `x-axis`:

## Transformation point and scaling

Using `scale`, you can also set a transformation point with `transform-origin`.

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

• `top`
• `right`
• `bottom`
• `left`

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:

We applied `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 `x-axis`
• If you use two values, it sets the transformation point on the `x` and `y-axis`

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.

About Hexlet learning process

## 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.

130
courses
1000
exercises
2000+
hours of theory
3200
tests

Programming courses for beginners and experienced developers. Start training for free

• 130 courses, 2000+ hours of theory
• 1000 practical tasks in a browser
• 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

Suggested learning programs
profession
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time