2D and 3D Transformations in Computer Graphics

Learning Objectives

By the end of this page, you will be able to:

• Derive and apply the formulas for translation, rotation, scaling, and shearing in 2D.
• Extend translation, rotation, and scaling to 3D, including rotation about each of the three axes.
• Represent 2D and 3D transformations as matrices and explain why matrix form enables combining transformations.
• Explain why homogeneous coordinates are necessary to represent translation as matrix multiplication.
• Work through a worked example that composes multiple transformations in the correct order.
• Identify why transformation order changes the final result.

Quick Answer

A transformation in computer graphics is a mathematical operation that changes an object's position, orientation, or size — the four basics are translation (move), rotation (turn), scaling (resize), and shearing (skew). These matter because every animation, every camera movement, and every object placement in a 3D scene is built from these operations applied to raw geometry. Graphics systems represent transformations as matrices so that many operations — say, "rotate, then scale, then move" — can be combined into a single matrix and applied to thousands of points in one efficient step, which is exactly what GPUs are optimized to do at scale.

Introduction

Every object rendered in a graphics application starts as raw geometry — a set of points, typically centered at the origin in what's called object space or model space. Transformations are what take that raw geometry and place it correctly into a scene: scaling it to the right size, rotating it to face the right direction, and moving it to the right location. Without transformations, every object in a game would render at the same place, size, and orientation.

This chapter builds directly on the coordinate systems and geometric transformation concepts introduced earlier, and on the rendering pipeline's vertex-processing stage (Graphics Hardware chapter) — this is the actual math that stage performs.

2D Transformations

Translation

Definition: Translation moves every point of an object by the same fixed vector, without changing its shape, size, or orientation.

Explanation: If you shift a point $(x, y)$ by an offset $(t_x, t_y)$, every coordinate simply adds that offset:

$x' = x + t_x \qquad y' = y + t_y$

Example: Translating the point $(2, 3)$ by $(5, -1)$ gives $(7, 2)$.

Real-world example: Dragging an icon across a screen is a continuous sequence of small translations applied every frame as the cursor moves.

Why it matters: Translation is the simplest transformation, but it's also the one that breaks simple matrix multiplication — a plain 2x2 matrix multiplied by $(x, y)$ can only scale and rotate, never shift. This is the motivation for homogeneous coordinates, introduced below.

Common misunderstanding: Students think translation can be written as a 2x2 matrix multiplication like rotation and scaling. It cannot — addition isn't multiplication — which is precisely why graphics systems use an extended coordinate representation.

Rotation

Definition: Rotation turns an object around a fixed point (usually the origin) by an angle $\theta$, preserving size and shape.

Explanation: A point $(x, y)$ rotated counter-clockwise by angle $\theta$ becomes:

$x' = x\cos\theta - y\sin\theta \qquad y' = x\sin\theta + y\cos\theta$

Example: Rotating the point $(1, 0)$ by $90°$gives$(1\cdot 0 - 0\cdot 1,\ 1\cdot 1 + 0\cdot 0) = (0, 1)$ — exactly what you'd expect for a quarter-turn.

Real-world example: A steering wheel indicator in a racing game rotates the wheel graphic in real time based on player input, using this exact formula every frame.

Why it matters: Rotation is the only basic transformation that mixes both coordinates together in its formula, which is why it's usually the hardest for students to compute by hand at first.

Common misunderstanding: Students forget that this formula rotates around the origin. To rotate around any other point, you must translate that point to the origin, rotate, then translate back — a three-step composition covered later in this chapter.

Scaling

Definition: Scaling changes an object's size along each axis by given factors, without changing its shape (if the factors are equal) or with distortion (if they differ).

Explanation: Scaling a point $(x, y)$ by factors $(s_x, s_y)$ gives:

$x' = x \cdot s_x \qquad y' = y \cdot s_y$

Example: Scaling $(4, 2)$ by $(0.5, 3)$ gives $(2, 6)$ — half as wide, three times as tall.

Real-world example: Pinch-to-zoom on a phone applies a uniform scale factor ($s_x = s_y$) to the entire visible content.

Why it matters: Scaling is also always relative to the origin by default — scaling an object that isn't centered at the origin will move it as well as resize it, a subtlety many students miss until they see it happen.

Common misunderstanding: Students expect scaling to only change size. If the object isn't centered at the origin, scaling also shifts its position, because every coordinate (including those far from zero) is multiplied by the scale factor.

Shearing

Definition: Shearing skews an object by shifting coordinates in one direction proportionally to their position in another direction.

Explanation: Shearing along the x-axis (using shear factor $sh_x$) and y-axis (using $sh_y$) is given by:

$x' = x + sh_x \cdot y \qquad y' = y + sh_y \cdot x$

Example: Shearing the point $(2, 4)$ with $sh_x = 0.5, sh_y = 0$ gives $x' = 2 + 0.5 \times 4 = 4$, $y' = 4$ — the point shifts right proportionally to its height.

Real-world example: Italic text rendering is essentially a shear transformation applied to upright letterforms.

Why it matters: Shearing is less common in everyday transformations but appears in font rendering, 2D game "squash and stretch" effects, and as a building block for more complex deformations.

Common misunderstanding: Students confuse shearing with rotation because both "tilt" an object visually. Rotation preserves all distances and angles between points; shearing does not — it genuinely distorts the shape.

3D Transformations

3D transformations extend the same ideas into the z-axis, with rotation becoming more complex because there are now three independent axes to rotate around.

3D Translation and Scaling

These extend directly from 2D by adding a z-component:

$\text{Translation: } x' = x+t_x,\quad y'=y+t_y,\quad z'=z+t_z$ $\text{Scaling: } x'=x \cdot s_x,\quad y'=y \cdot s_y,\quad z'=z \cdot s_z$

Example: Translating $(1, 2, 3)$ by $(1, -1, 2)$ gives $(2, 1, 5)$.

3D Rotation

Definition: Rotation in 3D turns points around one of the three coordinate axes (x, y, or z) by an angle $\theta$.

Explanation: Each axis has its own formula, since rotation around an axis leaves that axis's coordinate unchanged and mixes the other two:

$\text{About X-axis: } y' = y\cos\theta - z\sin\theta,\quad z' = y\sin\theta + z\cos\theta$ $\text{About Y-axis: } x' = x\cos\theta + z\sin\theta,\quad z' = -x\sin\theta + z\cos\theta$ $\text{About Z-axis: } x' = x\cos\theta - y\sin\theta,\quad y' = x\sin\theta + y\cos\theta$

Example: Rotating $(0, 1, 0)$ by $90°$about the X-axis gives$y' = 1\cdot 0 - 0\cdot 1 = 0$,$z' = 1\cdot 1 + 0\cdot 0 = 1$, so the point moves from$(0,1,0)$to$(0,0,1)$ — it swings from the y-axis to the z-axis, exactly as a 90° turn around x should.

Real-world example: An airplane flight simulator represents pitch, yaw, and roll as rotations about three different axes of the aircraft's own local coordinate frame.

Why it matters: Combining rotations about different axes in different orders produces different final orientations — this non-commutativity is the root cause of a well-known 3D animation problem called gimbal lock, where two rotation axes become aligned and a degree of rotational freedom is lost.

Common misunderstanding: Students assume rotating 30° about X then 45° about Y gives the same final orientation as doing it in the reverse order. It does not — 3D rotations do not commute, which is why professional animation tools often use quaternions instead of sequential axis rotations for smooth, order-independent results.

Matrix Representation and Homogeneous Coordinates

Writing every transformation as a separate formula gets unwieldy once you need to combine several. The solution is to express each transformation as a matrix, so that combining transformations becomes matrix multiplication — an operation GPUs are built to do extremely fast.

The catch: translation is addition, not multiplication, so a plain $2\times2$or$3\times3$matrix can represent rotation, scaling, and shearing, but not translation. The fix is **homogeneous coordinates** - adding an extra coordinate (a 1) to each point, turning$(x, y)$into$(x, y, 1)$, which allows translation to be folded into matrix multiplication too.

2D Transformation in Homogeneous Form

A general 2D transformation combining scale $(s_x, s_y)$, rotation $\theta$, and translation $(t_x, t_y)$ can be written as:

\begin{bmatrix} x' \\ y' \\ 1 \end{bmatrix} = \begin{bmatrix} s_x\cos\theta & -\sin\theta & t_x \\ \sin\theta & s_y\cos\theta & t_y \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \\ y \\ 1 \end{bmatrix}

Worked Example: Composing Transformations

Suppose we want to rotate the point $(1, 0)$ by $90°$around the origin, and then translate it by$(2, 3)$.

Step 1 — Rotate: Using the rotation formula with $\theta = 90°$ ($\cos 90° = 0$, $\sin 90° = 1$): $x' = 1(0) - 0(1) = 0 \qquad y' = 1(1) + 0(0) = 1$ Result after rotation: $(0, 1)$.

Step 2 — Translate: Add $(2, 3)$ to the rotated point: $x'' = 0 + 2 = 2 \qquad y'' = 1 + 3 = 4$ Final result: $(2, 4)$.

Order matters: If we translated first and rotated second, we'd get a different answer. Translating $(1,0)$ by $(2,3)$ gives $(3,3)$; rotating $(3,3)$ by 90° gives $x'=3(0)-3(1)=-3$, $y'=3(1)+3(0)=3$, i.e. $(-3, 3)$ — nothing like $(2,4)$. This is exactly why transformation order is specified explicitly in every graphics API, and why matrix multiplication (which is applied right-to-left onto a point) must be composed in the intended sequence.

Visual Learning

The standard convention — scale, then rotate, then translate — exists because scaling and rotating around the origin only behave predictably before the object has been moved away from it. Reversing this order (translating first) usually produces unintended results, as shown in the worked example above.

Real-World Applications

• Computer graphics — every rendered 3D model in a game or film is transformed from object space into world space using exactly this matrix machinery.
• Robotics — robot arm joints are modeled as chained rotations and translations to compute where the end effector (gripper) ends up.
• Augmented reality — placing a virtual object onto a real-world camera feed requires transforming the object's coordinates into the camera's coordinate frame.
• Data visualization — rotating and scaling 3D plots (e.g., in scientific software) uses these same formulas to let users interactively explore data.

Key Terms

Term	Definition
Translation	Moving every point of an object by a fixed vector, preserving size and orientation.
Rotation	Turning an object around a fixed point or axis by an angle, preserving size and shape.
Scaling	Resizing an object along one or more axes by given factors.
Shearing	Skewing an object by shifting coordinates proportionally to another coordinate.
Homogeneous coordinates	An extended coordinate representation (adding a 1) that allows translation to be expressed as matrix multiplication.
Transformation matrix	A matrix that, when multiplied by a point, applies a transformation to it.
Gimbal lock	The loss of a degree of rotational freedom that occurs when two rotation axes align, a consequence of 3D rotations not commuting.
Object space / World space	Object space is the coordinate frame local to an object's own geometry; world space is the shared coordinate frame of the whole scene after transformation.

Common Mistakes

Misconception 1: "Transformation order doesn't matter — rotating then translating is the same as translating then rotating." Why it's wrong: Matrix multiplication is not commutative, and the worked example above shows rotating-then-translating a point gives $(2,4)$, while translating-then-rotating gives $(-3,3)$ — clearly different results. Correct understanding: Order must be chosen deliberately; the standard convention is scale, then rotate, then translate, because rotation and scaling are only predictable when centered at the origin.

Misconception 2: "Translation can be written as a matrix multiplication just like rotation and scaling." Why it's wrong: Translation is addition ($x' = x + t_x$), and no 2x2 or 3x3 linear matrix can add a constant offset through multiplication alone. Correct understanding: Homogeneous coordinates (adding an extra "1" coordinate) are required to fold translation into matrix multiplication, which is why graphics systems use $3\times3$matrices for 2D and$4\times4$matrices for 3D instead of the "expected"$2\times2$or$3\times3$.

Misconception 3: "Scaling an object only changes its size, never its position." Why it's wrong: The scaling formula multiplies every coordinate, including the object's distance from the origin — if the object isn't centered at the origin, scaling moves it as a side effect. Correct understanding: To scale an object "in place," you must first translate it so its center is at the origin, scale, then translate it back — the same three-step trick used for rotating around an arbitrary point.

Comparison and Connections

Transformation	Formula Type	Changes Size?	Changes Orientation?	Changes Position?
Translation	Addition	No	No	Yes
Rotation	Trigonometric mixing of coordinates	No	Yes	No (around origin)
Scaling	Multiplication	Yes	No	Only if off-origin
Shearing	Proportional addition	Effectively yes (distorts shape)	Yes (visually skews)	No

Concept	2D	3D
Homogeneous coordinate form	$(x, y, 1)$	$(x, y, z, 1)$
Transformation matrix size	3x3	4x4
Rotation axes	One (around a point)	Three (X, Y, Z)
Commutativity of rotations	N/A (single axis)	Rotations about different axes do not commute

Practice Questions

Recall

1. Write the formula for translating a 2D point $(x, y)$ by a vector $(t_x, t_y)$. Answer guidance: $x' = x + t_x$, $y' = y + t_y$.
2. What problem do homogeneous coordinates solve? Answer guidance: They let translation, which is addition, be expressed as matrix multiplication by adding an extra coordinate, enabling all transformations to be combined into a single matrix.

Understanding

3. Explain why scaling an object that is not centered at the origin also changes its position. Answer guidance: The scaling formula multiplies every coordinate value by the scale factor, so points farther from the origin move proportionally more — this shifts the object's overall position unless it was already centered at the origin.
4. Why do 3D rotations about different axes not commute, while 2D rotations around the same origin point do (when composed with themselves)? Answer guidance: In 3D, rotating about one axis changes the other two coordinates, so a subsequent rotation about a different axis operates on already-altered values, producing an order-dependent result; in 2D there's effectively only one rotation axis (through the origin, perpendicular to the plane), so multiple rotations about it do commute since they're all just adding angles.

Application

5. You need to rotate a square 45° around its own center (which is not at the origin), rather than around the world origin. Describe the sequence of transformations needed. Answer guidance: Translate the square so its center moves to the origin, apply the 45° rotation, then translate back by the reverse of the original offset — the classic "translate, transform, translate back" pattern.
6. A flight simulator needs to rotate an aircraft model by pitch, then yaw, then roll. Why must the simulator apply these rotations in a specific, consistent order? Answer guidance: Because 3D rotations do not commute, applying pitch-yaw-roll in a different order (e.g., roll-yaw-pitch) produces a different final orientation; consistency avoids unpredictable aircraft orientation and issues like gimbal lock.

Analysis

7. Compare the outcome of rotating-then-translating versus translating-then-rotating the point $(1,0)$ by 90° and $(2,3)$ respectively (as shown in the worked example). Explain in your own words why the results differ. Answer guidance: Rotate-then-translate gives $(2,4)$; translate-then-rotate gives $(-3,3)$. The difference arises because rotation is always computed relative to the current origin — once the point has been translated away from the origin, rotating it afterward swings it around a completely different pivot than intended.
8. A junior developer proposes representing all 2D transformations using only 2x2 matrices to "keep things simple." Evaluate this proposal. Answer guidance: The proposal fails for any transformation involving translation, since a 2x2 linear matrix can only represent rotation, scaling, and shearing — not the additive offset of translation. A 3x3 homogeneous matrix is necessary if translation must be combined with the other transformations in a single matrix multiplication, which is required for efficient GPU-based transformation pipelines.

FAQ

Q1: Why are 4x4 matrices used for 3D transformations instead of 3x3? A 3x3 matrix can represent rotation, scaling, and shearing in 3D, but not translation, for the same reason a 2x2 matrix can't in 2D. A 4x4 matrix operating on homogeneous coordinates $(x, y, z, 1)$ folds translation in as well.

Q2: What is gimbal lock, and why does it happen? Gimbal lock is the loss of one degree of rotational freedom that occurs when two of the three rotation axes become aligned during a sequence of axis rotations. It happens because sequential axis rotations are order-dependent and can "collapse" the available rotation directions; many 3D applications use quaternions to avoid it.

Q3: Why does the order scale-rotate-translate matter, and is it always required? It's a convention, not a strict law, but it's followed because rotation and scaling are defined relative to the origin — applying them after an object has already moved away from the origin produces unintended shifts, as shown in the worked example.

Q4: Can shearing be undone by another shear? Yes — shearing is a linear, invertible transformation (as long as the shear factors don't create a degenerate matrix), so applying the inverse shear factors restores the original shape.

Q5: Why do GPUs care about transformations being expressed as matrices? Because matrix multiplication is exactly the kind of repetitive, parallelizable computation GPUs are built to execute at massive scale (see the Graphics Hardware chapter) — every vertex in a scene can have the same transformation matrix applied to it simultaneously across GPU cores.

Quick Revision

• Translation: $x'=x+t_x, y'=y+t_y$ — addition, not multiplication.
• Rotation: mixes both coordinates via sine/cosine; always relative to the origin unless recentered first.
• Scaling: multiplies coordinates by scale factors; also shifts off-origin objects.
• Shearing: skews shape by adding a proportional amount of one coordinate to another.
• 3D adds a z-axis and three independent rotation axes (X, Y, Z), each with its own formula.
• Homogeneous coordinates (extra "1") let translation be folded into matrix multiplication.
• 2D transformation matrices are 3x3; 3D transformation matrices are 4x4, both in homogeneous form.
• Transformation order matters: rotate-then-translate ≠ translate-then-rotate.
• To transform "in place" around a non-origin point/center, translate to origin, transform, translate back.
• 3D rotations do not commute — this is the root cause of gimbal lock.
• Standard composition order: scale, then rotate, then translate.

Related Topics

Prerequisites: Introduction to Computer Graphics (coordinate systems); basic trigonometry and matrix multiplication (Linear Algebra and Probability for Computer Science).

Related Topics: Graphics Hardware (the vertex-processing pipeline stage that executes these transformations); Linear Algebra and Probability for Computer Science (matrix operations underpinning this entire chapter).

Next Topics: Shading and Rendering Techniques (how a correctly transformed and projected scene is finally colored and lit).