CSS transform function

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.