Features of transform-origin, part 2

Now let’s try to make the transform smooth. For this, the CSS provides the transition property. We will not go into the details of how exactly the transition works and is applied. We will discuss this in detail in the next course.

In a nutshell, transition allows you to smoothly change the value of a property. In our case, the transform property will change smoothly together with the scale function, and the transition between the two values will take half a second.

All this will clearly show how the origin of the coordinate system changes for different values of transform-origin. To demonstrate this, let’s set values for transform-origin and press the “Run” button, which will cause the active class to be toggled for the .picture block.