W3cubDocs

/CSS

matrix()

The matrix() CSS function specifies a homogeneous 2D transformation matrix comprised of the specified six values. The constant values of such matrices are implied and not passed as parameters; the other parameters are described in the column-major order.

matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

Note: Until Firefox 16, Gecko accepted a <length> value for tx and ty.

Syntax

matrix(a, b, c, d, tx, ty)

Values

a b c d: Are <number> describing the linear transformation.
tx ty: Are <number> describing the translation to apply.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
$(\begin{matrix} a & c \\ b & d \end{matrix})$	$(\begin{matrix} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} a & c & 0 & tx \\ b & d & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
$(\begin{matrix} a & c \\ b & d \end{matrix})$	`[a b c d tx ty]`

Examples

TBD

Edit this page on MDN

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix