= CSS transform function
{c}
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.<CSS Transforms Module Level 1 by World Wide Web Consortium>[§9.1, 2D transform functions; §§3 and 10, composition]{ref}
For the two-dimensional function `matrix(a,b,c,d,e,f)`, a homogeneous column-vector convention gives
$$
\begin{pmatrix}x'\\y'\\1\end{pmatrix}
=
\begin{pmatrix}a&c&e\\b&d&f\\0&0&1\end{pmatrix}
\begin{pmatrix}x\\y\\1\end{pmatrix}.
$$
In particular, $x'=ax+cy+e$ and $y'=bx+dy+f$. The six arguments do not fill the displayed matrix row by row.<CSS Transforms Module Level 1 by World Wide Web Consortium>[§9.1, matrix() coefficient convention]{ref}
For an own example with zero origin, `matrix(2,0,0,3,10,-5)` maps point $(4,2)$ to
$$
(2(4)+10,\;3(2)-5)=(18,1).
$$
This 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.<CSS Transforms Module Level 1 by World Wide Web Consortium>[§3, function-list matrix construction; §10, transform lists]{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.
Back to article page
