CSS transform reference box

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.