# transform

Apply a matrix algebra operation on an element.

## Transform functions

All transformations are carried out using standard matrix algebra. Two-dimensional matrix operations require 6 values. Three-dimensional matrix operations require 12 values.

The CSS transform property expects these values to be specified using one of its special transform functions. There are 21 of these, each resulting in a different type of translation. Here is a summary:

function 2D 3D
matrix(a, b, c, d, tx, ty)
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
rotate(θ)
rotate3d(x, y, z, θ)
rotateX(θ)
rotateY(θ)
rotateZ(θ)
scale(sx, sy)
scale3d(sx, sy, sz)
scaleX(sx)
scaleY(sy)
scaleZ(sz)
translate(tx, ty)
translate3d(tx, ty, tz)
translateX(tx)
translateY(ty)
translateZ(tz)
skew(θx, θy)
skewX(θx)
skewY(θy)
perspective(d)

### Multiple transformations

Multiple transformation may be carried out in a single declaration. Two-dimensional operations are commutative, so they may be provided in any order. But three dimensional operations are not commutative, so they should be specified in a particular order.

## Variable units

All of the values for matrix, matrix3d and scaling (a, b, c, d, tx, ty, sx, sy, sz) are unitless numbers.

The units for rotating and skewing angles (θ, θx, θy) may be any of these:

unit meaning
deg degrees