Features of transform-origin, part 1

Now that the ancient evil power has been defeated, and Pendalf has made it back home, it’s time to figure out another subtle detail of how transforms work, namely the transform-origin property. (And let’s also hang a commemorative photo on the wall).

This property is used in conjunction with the transform property to assign the origin of the coordinate system that will be used to perform the transforms.

The transform-origin syntax for 2D transforms is as follows:

transform-origin: origin-along-X-axis [origin-along-Y-axis]

The property values are specified in the browser using width units (px, em…), as a %, and also using the keywords left, right, top, bottom and center.

By default, the value of transform-origin is equal to 50% 50%, that is, the origin of the coordinate system is at the center of the object. If you do not specify the value of origin-along-Y-axis, then it is considered equal to 50%.

Let’s take a look at the scale function in the example and how the transform behaves with different values of transform-origin: in this case, the block will be resized relative to the given point.