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