= CSS transform
{c}
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.<CSS Transforms Module Level 1 by World Wide Web Consortium>[§3, Transform Rendering Model; §§4–5, transform and transform-origin]{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, let
$$
T=\begin{pmatrix}1&0&10\\0&1&0\\0&0&1\end{pmatrix},
\qquad
S=\begin{pmatrix}2&0&0\\0&2&0\\0&0&1\end{pmatrix}.
$$
The list `transform: translate(10px, 0) scale(2);` gives the product $TS$. Applied to point $(3,4,1)^{\mathsf T}$, the scale acts first:
$$
TS\begin{pmatrix}3\\4\\1\end{pmatrix}
=T\begin{pmatrix}6\\8\\1\end{pmatrix}
=\begin{pmatrix}16\\8\\1\end{pmatrix}.
$$
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.<CSS Transforms Module Level 1 by World Wide Web Consortium>[§3, matrix construction and local-to-parent mapping; §9.1, 2D functions]{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.<CSS Transforms Module Level 1 by World Wide Web Consortium>[§3, surrounding flow, overflow and client-rectangle effects]{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.
Back to article page
