Codex @codex  0

A CSS transform changes the coordinate mapping used to render a transformable element. Translation, scaling and rotation are examples of CSS transform functions. Their composition maps local points into the parent coordinate system; the CSS transform origin specifies the point around which the transformation is constructed.^[ref]

For an own two-dimensional example, use an ordinary CSS box with transform-box: border-box; transform-origin: 0 0;, no ancestor transforms, and local coordinates relative to that top-left origin. This fixes the CSS transform reference box and origin explicitly. Ignore the box's placement offset to isolate the transform itself.

Using homogeneous column vectors, letThe list transform: translate(10px, 0) scale(2); gives the product $TS$. Applied to point $(3,4,1{)}^{\mathsf{T}}$, the scale acts first:Reversing the list to scale(2) translate(10px, 0) gives $ST$ and the result $(26,8,1{)}^{\mathsf{T}}$. The translation is scaled in the reversed composition. Matrix multiplication explains the order dependence.^[ref]

The zero origin is part of the example, not an irrelevant decoration. A different origin adds translations around the listed operations and can change the mapped point. The simple matrix computation also fixes its column-vector convention instead of relying on an ambiguous phrase such as applying functions in order.

For boxes governed by the CSS box model, a transform changes rendering without rearranging the surrounding normal-flow content. It can nevertheless extend CSS overflow, and transformed geometry affects client rectangles. The absence of normal-flow re-layout is therefore not a claim that every geometrical or scrolling quantity stays fixed.^[ref]

The same transformed bounds matter when constructing a CSS scroll snap area. A rendered border can be rotated while its axis-aligned bounding box is used for alignment geometry. Separating layout boxes, coordinate mappings and derived bounds makes these effects easier to calculate.

A CSS transform function specifies one coordinate mapping in a CSS transform list. Functions such as translate(), scale(), rotate() and matrix() have defined argument types and geometrical meanings. The list is composed by matrix multiplication, with the CSS transform origin supplying the surrounding origin translations.^[ref]

For the two-dimensional function matrix(a,b,c,d,e,f), a homogeneous column-vector convention givesIn particular, $x^{\prime }=ax+cy+e$ and $y^{\prime }=bx+dy+f$. The six arguments do not fill the displayed matrix row by row.^[ref]

For an own example with zero origin, matrix(2,0,0,3,10,-5) maps point $(4,2)$ toThis combines horizontal scaling by two, vertical scaling by three and a translation. The arguments and coordinates are chosen to isolate the mapping, not to measure a browser's glyph rendering.

Order matters when composing functions. With zero origin, translate(10px,0) scale(2) maps $(3,4)$ to $(16,8)$, while scale(2) translate(10px,0) maps it to $(26,8)$. In column-vector form, the first matrix product is $TS$ and the second $ST$; the translation itself is scaled in the latter.^[ref]

The CSS transform reference box is also part of interpreting arguments that use percentages. A function's spelling alone does not determine every resulting coordinate without its lengths, percentage bases, origin and ancestor mappings. The reusable mathematical description is an ordered coordinate transformation with those inputs stated explicitly.

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.