Is `transform-origin` only applicable to `rotate` in terms of 2D transforms?

Question

I’m a bit confused on the idea of the transform-origin property, mainly its uses. Does transform-origin only apply to rotate in terms of 2D transforms?

Answer 1

transform-origin apply to linear transformation. To make it easy, transform-origin apply to all the transformation and the only exception is translation which is an affine transformation.

Any kind of transfomation can be written using a matrix like below:

matrix(a, b, c, d, tx, ty) 

where

a b c d

Are <number>s describing the linear transformation.

tx ty

Are <number>s describing the translation to apply. ^ref

If b,c are different from 0 or a,d different from 1 then transform-origin will have an effect on your transformation. If b,c are equal to 0 and a,d equal to 1 then transform-origin will have no effect.

Only translate() or an identity transformation (skew(0), scale(1), rotate(0), etc) will give you 0 in c,b and 1 in a,d

From the specification:

If we have the identity in the red part then it's most likely a translation or nothing (if e and f are 0).

Example to illustrate the case of using a translation:

.box {
  width:100px;
  height:100px;
  display:inline-block;
  margin:10px;
  background:red;
  transform:translate(10px,50px);
}

<div class="box" style="transform-origin:0 0"></div>
<div class="box" style="transform-origin:100% 0"></div>
<div class="box" style="transform-origin:50px 10px"></div>
<div class="box" style="transform-origin:9999px -9999px"></div>

For more details you can follow this link: https://drafts.csswg.org/css-transforms/#transform-rendering where you will find the full explanation about how transformation is done and how transform-origin is applied

The transformation matrix is computed from the transform and transform-origin properties as follows:

1. Start with the identity matrix.

2. Translate by the computed X and Y of transform-origin

3. Multiply by each of the transform functions in transform property from left to right

4. Translate by the negated computed X and Y values of transform-origin

It's clear that the (2) and (4) are opposite actions and in order to disable each other we need to either have no transformation in (3) or a simple translation.