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

• Transformation point and scaling
• Additional assignment

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:

Additional assignment

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.