# 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
The units for translating and perspective `(tx, ty, tz, d)` may be any of these:
 % percent A percent of the element's width or height em em The `font-size` of the current font rem relative em The `font-size` of the element in inch A size equal 96px px pixels A size equal to 1/96 inch pt point A size equal 1in/72 = 1.33px pc pica A size equal 1in/6 = 12pt = 16px cm centimeter A size equal to 96px/2.54 = 37.8px mm millimeter A size equal to 96px/25.4 = 3.8px Q quarter millimeter A size equal to 96px/1016 = 0.94px