What is a 2D affine transformation and what geometric properties does it preserve?

An affine transformation is a linear mapping method that preserves collinearity (all points lying on a line continue to lie on a line after transformation) and ratios of distances between points along parallel lines. While it allows translation, rotation, scaling, and shearing, it preserves straight lines and parallel lines, unlike projective transformations.

Why are homogeneous coordinates (3x3 matrices) required for 2D transformations?

In standard 2D Cartesian coordinates [x, y], rotation, scale, and shear are represented by 2x2 matrix multiplication, but translation is an addition (vector sum). By augmenting 2D coordinates into 3D homogeneous coordinates [x, y, 1], translation can be integrated into the 3x3 matrix multiplication, allowing all transformation types to be composed into a single unified matrix.

Why is the order of matrix multiplication non-commutative in graphics pipelines?

Matrix multiplication is strictly non-commutative (A * B != B * A). Rotating an object by 45 degrees and then translating it 100 pixels along the X-axis yields a completely different final coordinate than translating it 100 pixels along the X-axis first and then rotating it around the world origin.

How do you invert a 2D affine matrix and why is it essential for mouse pointer picking?

When a user clicks on a canvas, the browser reports pointer coordinates in screen pixel space. To determine which rotated and scaled vector shape was clicked, the engine multiplies the mouse coordinate vector by the Inverse Matrix (M^-1) of the shape, unprojecting screen coordinates back into the shape local object space for simple bounding box collision checks.

How does CSS transform: matrix(a, b, c, d, e, f) map to 3x3 affine matrices?

The six arguments in CSS matrix(a, b, c, d, e, f) map directly to the 3x3 affine matrix components: [a, c, e; b, d, f; 0, 0, 1]. In this layout, a represents horizontal scaling, b represents vertical skewing, c represents horizontal skewing, d represents vertical scaling, e represents horizontal translation (tx), and f represents vertical translation (ty).

2D Affine Matrix Transformations: Translation, Rotation, Scale & Shear Math

Every visual element rendered in modern web browsers—from dragging an SVG vector path, rotating a 2D canvas sprite, zooming an interactive map, to executing hardware-accelerated CSS keyframe animations—is powered by linear algebra. Specifically, the entire discipline of 2D computer graphics rests on the mathematical elegance of Affine Transformation Matrices. 2D Affine Matrix Transformations: Translation, Rotation, Scale & Shear Math explores homogeneous coordinate systems, 3x3 matrix multiplication pipelines, non-commutative composition order, and inverse matrix unprojection.

The Limitations of 2D Cartesian Coordinates

In standard two-dimensional space, linear transformations—such as scaling, rotation, and shear—can be modeled through $2 imes 2$ matrix multiplication:

  \begin{bmatrix} x' \\ y' \end{bmatrix} =
  \begin{bmatrix} a & c \\ b & d \end{bmatrix}
  \begin{bmatrix} x \\ y \end{bmatrix}

However, translation (moving an object by $t_x, t_y$) cannot be expressed as a $2 imes 2$ matrix multiplication; it requires vector addition:

  \begin{bmatrix} x' \\ y' \end{bmatrix} =
  \begin{bmatrix} a & c \\ b & d \end{bmatrix}
  \begin{bmatrix} x \\ y \end{bmatrix} +
  \begin{bmatrix} t_x \\ t_y \end{bmatrix}

Mixing matrix multiplications with vector additions prevents chaining multiple transformations into a single, compact mathematical representation.

Homogeneous Coordinates & The 3x3 Affine Matrix

To unify all transformations into pure matrix multiplication, computer graphics adopts Homogeneous Coordinates. By augmenting a 2D vector $[x, y]^T$ with a third dimension $w=1$, translation becomes a linear shear in 3D projective space:

  \begin{bmatrix} x' \\ y' \\ 1 \end{bmatrix} =
  \begin{bmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{bmatrix}
  \begin{bmatrix} x \\ y \\ 1 \end{bmatrix} =
  \begin{bmatrix} ax + cy + e \\ bx + dy + f \\ 1 \end{bmatrix}

This $3 imes 3$ matrix is the universal standard across SVG (transform="matrix(a, b, c, d, e, f)"), Canvas 2D (ctx.transform(a, b, c, d, e, f)), and CSS (transform: matrix(a, b, c, d, e, f)).

Elementary 2D Affine Transformation Matrices

Operation	Mathematical Matrix Structure	CSS Matrix Format	Transformation Effect
Translation	[1, 0, tx; 0, 1, ty; 0, 0, 1]	`matrix(1, 0, 0, 1, tx, ty)`	Displaces coordinates by offset (tx, ty)
Scaling	[sx, 0, 0; 0, sy, 0; 0, 0, 1]	`matrix(sx, 0, 0, sy, 0, 0)`	Scales coordinates relative to origin
Rotation ($ heta$)	[cosθ, -sinθ, 0; sinθ, cosθ, 0; 0, 0, 1]	`matrix(cos, sin, -sin, cos, 0, 0)`	Rotates counter-clockwise by angle θ
Shear / Skew	[1, tanα, 0; tanβ, 1, 0; 0, 0, 1]	`matrix(1, tanβ, tanα, 1, 0, 0)`	Shears along X by angle α and Y by β

Matrix Multiplication & Non-Commutative Composition

When applying multiple sequential transformations to a shape—such as scaling by $S$, followed by rotation $R$, followed by translation $T$—the aggregate composite matrix $M_{\text{total}}$ is obtained through matrix multiplication:

  M_{\text{total}} = T \times R \times S

Crucially, matrix multiplication is non-commutative ($A \times B e B \times A$). Order dictates visual output:

Translate then Rotate ($R \times T$): Moves the shape first, then rotates it around the world origin $(0, 0)$, causing the shape to orbit the origin in an arc.
Rotate then Translate ($T \times R$): Rotates the shape around its local center first, then moves it to its final destination.

Inverse Matrices ($M^{-1}$) & Screen-to-World Unprojection

In interactive canvas applications, when a user clicks at screen pixel $(x_{\text{screen}}, y_{\text{screen}})$, the graphics engine must determine whether the click intersected an arbitrary rotated and skewed shape.

Instead of transforming complex polygon boundaries into screen space, the engine computes the Inverse Affine Matrix $M^{-1}$:

  \text{Det}(M) = ad - bc \\
  M^{-1} = \frac{1}{\text{Det}(M)} \begin{bmatrix}
  d & -c & ce - de \\
  -b & a & bf - af \\
  0 & 0 & \text{Det}(M)
  \end{bmatrix}

Multiplying the screen mouse coordinate vector by $M^{-1}$ unprojects the pointer into the shape's local coordinate space. In local space, the shape is an un-rotated axis-aligned box ($[0, 0, w, h]$), allowing instantaneous hit testing using simple bounding checks ($0 \le x_{\text{local}} \le w$ and $0 \le y_{\text{local}} \le h$).

DOMMatrix: Modern Browser Native Matrix Engine

Modern web engines provide native, C++ accelerated matrix operations via the DOMMatrix interface:

  const matrix = new DOMMatrix()

    .translateSelf(200, 150)

    .rotateSelf(45)

    .scaleSelf(1.5, 1.5);

  // Transform a point

  const transformedPoint = matrix.transformPoint(new DOMPoint(10, 20));

Using DOMMatrix bypasses manual JavaScript array arithmetic, delegates calculations to SIMD hardware instructions, and interfaces directly with CSS transform strings and WebGL uniforms.

Decomposing Affine Matrices for Interactive Transformation Gizmos

While multiplying transformation matrices into a single composite representation is straightforward, graphical editing tools (such as vector canvas selection handles and bounding box gizmos) frequently need to solve the inverse problem: Matrix Decomposition. Given an arbitrary $3 imes 3$ affine matrix $M$, how do we extract the human-readable scale factors ($s_x, s_y$), rotation angle ($\theta$), and skew values?

Using QR matrix decomposition, the transformation matrix is partitioned into an orthogonal rotation matrix $R$ and an upper triangular shear matrix $S$. The horizontal and vertical scale factors correspond to the Euclidean norms of the matrix basis column vectors: $s_x = \sqrt{a^2 + b^2}$ and $s_y = \sqrt{c^2 + d^2} \cdot \text{sign}(\text{Det}(M))$. The rotation angle is derived from the normalized basis vector via $\theta = \text{atan2}(b, a)$. This allows vector illustration software to present accurate, editable numeric inputs in user interface property inspectors even after complex multi-step transformations.