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.

The CSS transform reference box supplies the geometrical reference used to interpret a CSS transform and its CSS transform origin. The transform-box property selects that reference. Its size supplies percentage bases, and its position can add an offset to the specified origin.^[ref]

For an own ordinary-box example, use a $100$-by-$60$ CSS pixel content box, zero borders, twenty pixels of left padding, ten of top padding and zero padding on the other sides. Assume the content dimensions are definite and unaffected by competing constraints. The CSS border box is $120$ by $70$, while the CSS content box begins at border-box coordinates $(20,10)$.

With transform-box: border-box, a transform-origin: 50% 50% point is $(60,35)$ in those coordinates. With transform-box: content-box, the same percentage declaration instead givesThe difference comes from both the reference size and its offset. Asymmetric padding makes that distinction visible; two centered symmetric boxes could conceal it.

The function translateX(50%) likewise uses the selected reference width. Its translation component is sixty pixels for the border-box choice and fifty for the content-box choice. Percentage translation and percentage origin therefore require a stated reference rectangle before they can be converted into lengths.^[ref]

The property has additional reference choices for SVG, including object bounds and viewport-based geometry. Their used-value mappings differ depending on whether an SVG element has an associated CSS layout box. The ordinary-box example does not establish a universal default for every SVG element.^[ref]

Reference-box selection does not itself assign a new content width or padding. It tells the transformation calculation which existing rectangle to use. Keeping it separate from layout sizing and from the chosen origin prevents two distinct percentage bases from being conflated.