LearnViz CompSci
Home / Learn / Graphics, Vision & Media / 2D Transformations

Beginner Topic 11 of 49 Graphics, Vision & Media

2D Transformations

Translation, rotation and scaling in the plane.

How it works

2D transformations move, orient and reshape points and shapes in the plane. Basic ones are translation, rotation about the origin or a point, scaling, uniform or non-uniform, shearing and reflection. They can be expressed as matrix operations, with homogeneous coordinates letting translation be represented as a matrix multiplication, so a sequence of transformations combines into a single matrix. Order matters because matrix multiplication is not commutative.

Where it is used

Sprites in games, UI layout and animation, vector drawing programs, CSS transforms, canvas APIs and image processing use 2D transformations.

Common pitfall

Rotating and then translating gives different results from translating and then rotating, a classic source of bugs. Rotation about a point requires translating to the origin, rotating and translating back. Scaling about the origin moves objects unexpectedly. Non-uniform scaling combined with rotation causes skew. Be consistent about row versus column vector conventions and angle units, and compose transformations deliberately.

Where it fits in the course

2D Transformations is topic 11 of 49 in Graphics, Vision & Media, rated Beginner. It follows Polygons and Meshes. The next topic is Matrices in Graphics.

Practice and explore

How to study this topic

  1. Read the explanation above and restate the definition in your own words.
  2. Open the interactive lesson and answer its mini quiz.
  3. Read the common pitfall, then write a short example that avoids it.
  4. Check your understanding in the Graphics, Vision & Media quiz, and revisit the topic if you miss a question.

Frequently asked questions

What is 2D Transformations?
Translation, rotation and scaling in the plane. It belongs to Graphics, Vision & Media and is a beginner-level topic.
Where do people use 2D Transformations?
Sprites in games, UI layout and animation, vector drawing programs, CSS transforms, canvas APIs and image processing use 2D transformations.
What is the most common mistake with 2D Transformations?
Rotating and then translating gives different results from translating and then rotating, a classic source of bugs.
What should I learn before this topic?
Start with Polygons and Meshes, the topic just before it in Graphics, Vision & Media.
How can I practice it?
Answer the mini quiz in the interactive lesson, then take the Graphics, Vision & Media quiz.
Is 2D Transformations hard to learn?
It is a Beginner topic, so it works as an entry point. If the terms are new, read the explanation twice and try the visualizer before the quiz.
How long does it take to learn 2D Transformations?
Most learners can read the explanation and finish the interactive lesson in under an hour. Fluency comes from applying the idea, so plan a few short practice sessions with the quiz.
Which topics are related to 2D Transformations?
Polygons and Meshes, Matrices in Graphics, Line Drawing Algorithms are closely connected. The full list is in the related topics section of this page.
What should I study after 2D Transformations?
Continue with Matrices in Graphics, the next topic in Graphics, Vision & Media.

Related topics