2D and 3D Geometric Transformations With easy examples.

Geometric transformations move, resize and reshape objects in computer graphics — every game character, animation, CAD drawing and photo filter uses them. The five basic 2D transformations are translation (moving), scaling (resizing), rotation (turning), reflection (mirroring) and shear (slanting). Each can be written as a matrix, so transforming a point is just matrix multiplication.

Matrices matter because complex motion becomes matrix chaining: spinning, moving and enlarging a sprite collapses three matrices into one. GPUs do exactly this multiplication billions of times per second.

Key Concepts

• Homogeneous coordinates: a 2D point (x, y) becomes (x, y, 1); the extra 1 lets translation — an addition — be written as a matrix.
• Translation: shifts points by (tx, ty): 1s on the diagonal, tx and ty in the last column.
• Scaling: multiplies coordinates by (sx, sy); negative values flip the object.
• Rotation: turns points by θ about the origin via cos θ and sin θ; positive θ is counter-clockwise.
• Reflection: mirrors across an axis — across the x-axis the diagonal is (1, −1, 1), flipping the sign of y.
• Shear: slants the shape; an x-shear adds a multiple of y to x, as in slanted italic-style text.
• Composition: applying A then B is the single matrix B×A — order matters.

Formulas

• Translation by (tx, ty): [[1, 0, tx], [0, 1, ty], [0, 0, 1]]; (x, y, 1) becomes (x + tx, y + ty, 1).
• Scaling by (sx, sy): [[sx, 0, 0], [0, sy, 0], [0, 0, 1]].
• Rotation by θ: [[cosθ, −sinθ, 0], [sinθ, cosθ, 0], [0, 0, 1]].
• Reflection across x-axis: [[1, 0, 0], [0, −1, 0], [0, 0, 1]].
• X-shear by factor k: [[1, k, 0], [0, 1, 0], [0, 0, 1]].
• 3D extension: points become (x, y, z, 1) with 4×4 matrices; e.g. rotation about z is [[cosθ, −sinθ, 0, 0], [sinθ, cosθ, 0, 0], [0, 0, 1, 0], [0, 0, 0, 1]], and 3D translation puts (tx, ty, tz) in the last column.
• Assumptions and limits: affine only — straight lines stay straight and parallels stay parallel, so shapes cannot bend. Rotations turn about the origin unless wrapped in translate-rotate-translate-back.

Worked Example

Take P = (2, 3) and rotate it 90° counter-clockwise. With cos 90° = 0 and sin 90° = 1, the matrix is [[0, −1, 0], [1, 0, 0], [0, 0, 1]], giving x' = −3, y' = 2. Translate by (4, 1): (1, 3). As one combined matrix, T×R = [[0, −1, 4], [1, 0, 1], [0, 0, 1]] applied to (2, 3, 1) gives the same (1, 3). In 3D, translating (1, 2, 3) by (0, 0, 5) simply gives (1, 2, 8).

Common Misconceptions

• "Translation works with a 2×2 matrix." No 2×2 matrix can add a constant — that is why homogeneous coordinates add the extra row and column.
• "Transformation order does not matter." Rotate-then-translate lands somewhere different from translate-then-rotate.
• "Scaling by 2 doubles the area." Scaling x and y each by 2 multiplies area by 4; uniform scaling by s multiplies area by s² and volume by s³.

Real-World Applications

• Video games and animation: character movement, camera orbits and effects are chains of 4×4 matrices run on the GPU.
• Image editing: rotate, flip, resize and skew tools are these matrices applied to pixels.
• Robotics: joint angles become the gripper's 3D position through chained matrices (forward kinematics).
• Medical imaging and CAD: scans are rotated and aligned with transformation matrices.

2D transformations become uniform 3×3 matrices through homogeneous coordinates, and 3D graphics upgrades them to 4×4. Chain operations by multiplying matrices, mind the order, and let the GPU do the arithmetic fast.