Why Understanding Matrix Geometry Makes CSS Transforms Easy

Preface

The author discovered 3Blue1Brown’s linear‑algebra videos, found the geometric essence of matrices fascinating, and decided to share the insights, especially how they apply to web development via CSS transforms.

What Will Be Covered

The article is split into two parts: (1) basic matrix operations with geometric interpretations sourced from the video series, and (2) practical examples using the CSS transform matrix.

Vectors and Basic Operations

A vector is any entity that can be added and scaled. Only these two operations are needed to reach any point in a space.

Vector addition corresponds to moving along one vector then another; the result equals moving directly along the sum vector.

Scalar multiplication stretches a vector by a factor, e.g., doubling both x and y components.

Linear Combination, Span, and Basis

Using the standard basis vectors (x‑axis and y‑axis), any planar vector can be expressed as a linear combination. If basis vectors become collinear, the span collapses to a line; if both are zero, the span is just the origin.

The span of a set of vectors is the collection of all their linear combinations. A basis is a minimal set of linearly independent vectors that span the space.

Matrix and Linear Transformations

A matrix represents a linear transformation of the plane. Its two columns are the images of the basis vectors after transformation.

Matrix‑Vector Multiplication

Multiplying a column vector by a matrix yields the coordinates of that vector in the transformed space.

Matrix Multiplication

Applying multiple transformations corresponds to left‑multiplying their matrices in order; the product matrix encodes the combined effect.

Determinant

The determinant of a 2×2 matrix (ad‑bc) measures how the transformation scales area: it equals the area of the parallelogram formed by the transformed basis vectors.

CSS transform Matrix

In CSS, transform: matrix(a,b,c,d,e,f) corresponds to the 3×3 matrix that combines linear transformation (a,b,c,d) with translation (e,f).

Basic Format

transform: matrix(a,b,c,d,e,f)

translate

Translation moves a point (x,y) to (x+e, y+f) without altering the linear part; its matrix is matrix(1,0,0,1,e,f).

scale

Scaling stretches coordinates; scale(sx,sy) corresponds to matrix(sx,0,0,sy,0,0).

rotate

Rotation by angle θ uses the matrix matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0).

Combining Transformations

Order matters because matrix multiplication is not commutative. For example, translate(50px,0) scale(0.5) first moves then scales, while scale(0.5) translate(50px,0) scales the translation distance as well.

Multiple transforms can be chained, e.g., translate(100%,0) translate(50px,0) or scale(2) scale(3) (resulting in a factor of 6).

Thought: Non‑Square Matrices

The article briefly asks what non‑square matrices (m≠n) represent, encouraging readers to think further.

Conclusion

Understanding the geometric meaning of vectors, matrices, and their operations helps developers intuitively use CSS transforms and avoid memorizing formulas.