Matrix algebra

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
rad radians
grad gradians
turn 1 turn of the circle

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 <html> 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

Examples

/* rotate 90 degrees */            
transform: rotate(90deg);

/* scale by 50%, then move 100px right */
transform: scale(50%) translateX(100px);
transform
0

style > transform > transformMatrix algebra

🔗 🔎