How to change the pivot point of CSS transforms using transform-origin

The transform-origin property defines the pivotal point around which a CSS transform happens.

It affects transforms such as rotate(), scale(), and skew().

By default, the transform happens around the center of an element:

Code example showing a button starting scalling from default position (center). — Here, transform-origin is implied. Its default value is center.

We can see how it works in the following image:

Gif showing how a button behaves according to the previous CSS rules.

Here, the button scales from its center.

But in this case, scaling from the left makes more sense:

Code example showing the previous button scalling from the left.

Gif showing how scalling starts from the left.

Defining the pivot point

As you can see in the previous example you can use keywords such as top, right, bottom, and left to define this point and you can also combine two keywords (left, center).

You can also use percentages and fixed lengths

Percentages give you more control over the exact position.
The first value controls the horizontal position while the second controls the vertical position.

In this example, the origin is one-quarter horizontally and three-quarters vertically.

Code example of tranform-origin using percentages.

You can also use lengths

Code example of a box using transform origin with fixed lengths.

These values place the origin 10px from the left and 30px from the top.

We can use a third value for controlling depth. This is useful in cases where we want to use 3D transforms.

Code example of transform-origin using a third value (40px) for depth.

Common mistakes and how to avoid them

1. Confusing transform-origin with `transform`

transform-origin sets the pivot point but it does not animate an element by itself.

For doing so you need both properties.

2. Reversing the values

As we have seen so far, the transform-origin property takes three values. The first value represents the x-axis, the second the y-axis and the third the z-axis. You must be aware of that when setting the values. Otherwise you may be surprised expecting something different from what you get.

3. Forgetting the default value

If you do not set a value for the transform-origin, the browser will use the center as default.

For a different effect, you should set your values explicitly.

4. Changing the transform-origin during an animation and not before

If transform-origin changes while an element is animating, the motion can look unexpected or take no effect at all.

Code example showing a case that when hover begins, transform-origin changes from the center to the left edge at the same time as the scale animation.

Here, when hover begins, transform-origin changes from the center to the left edge at the same time as the scale animation. This can make the fill appear to jump or to begin from the center to the left and not vice versa as you originally wished.

You should set the values before the animation begins.

Code example showing the previus transformation set BEFORE the beginning of the animation.

Conclusion

The transform-origin property changes the pivotal point of a visual transformation while keeping the normal position of the element in the page as is. This makes it useful for animating elements from a particular spot, other than the center which is the default.

Although my blog doesn’t support comments, feel free to reply via email or X.