 CSS transform origin

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 iswhere $A$ is the matrix product for the function list and $T(o)$ translates by the origin $o$.^[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 toThus $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 isIt 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.^[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.