{c}

The <CSS transform origin> is the point used when constructing an element's <CSS transform> matrix. The construction translates by the origin, applies the <CSS transform functions>, then translates by the negated origin. With homogeneous column vectors, its form is
$$
M=T(o)\,A\,T(-o),
$$
where $A$ is the matrix product for the function list and $T(o)$ translates by the origin $o$.<CSS Transforms Module Level 1 by World Wide Web Consortium>[§3, matrix-construction steps]{ref}

For an own example, use an ordinary CSS box with a $100$-by-$60$-pixel border box, `transform-box: border-box`, and no ancestor transforms. The declaration `transform-origin: 50% 50%` gives $o=(50,30)$ in local coordinates. With `transform: scale(2)`, a point $p$ maps to
$$
q=o+2(p-o)=2p-o.
$$
Thus $p=(60,35)$ maps to $(70,40)$. The same point scaled about $(0,0)$ would instead map to $(120,70)$.

The corresponding two-dimensional homogeneous <matrix> is
$$
M=\begin{pmatrix}
2&0&-50\\
0&2&-30\\
0&0&1
\end{pmatrix}.
$$
It maps the original corner $(0,0)$ to $(-50,-30)$ while leaving the center $(50,30)$ fixed. Changing the origin therefore changes the geometry even though the scale function is unchanged.

Percentages require a <CSS transform reference box>. A horizontal origin percentage uses that box's width and a vertical percentage its height; lengths provide offsets from its top-left corner. The reference-box selection and the point specified within it are two separate inputs.<CSS Transforms Module Level 1 by World Wide Web Consortium>[§5, percentage/length offsets; §6, transform reference box]{ref}

The example explicitly chooses its box and origin instead of transferring defaults between ordinary CSS boxes and <SVG> elements. The transform origin is also distinct from the <CSS scroll origin>, which concerns the alignment of scrollable contents. One governs coordinate transformation; the other anchors scrolling geometry.


 CSS transform origin (source code)