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 |