Geometric Transformations Visualizer

Visualize translations, rotations, reflections, dilations, and compositions on a coordinate plane. Pick a shape, choose a transformation, and see the original and image side by side. All calculations run in your browser.

Coordinate Plane

OriginalTransformed

Controls

Transformation

Shape

dx (horizontal)

dy (vertical)

Quick Presets

Results

Transformation Rule

(x, y) \to (x + 3,\; y + 2)

Vertex Mappings

A(1,1) \to A'(4,3)

B(3,1) \to B'(6,3)

C(2,3) \to C'(5,5)

Vertex	Original	Image
A	(1, 1)	(4, 3)
B	(3, 1)	(6, 3)
C	(2, 3)	(5, 5)

CongruentSimilar

Reference Guide

Translation

A translation slides every point of a figure the same distance in the same direction, defined by a vector $\langle d_x, d_y \rangle$ .

(x, y) \to (x + d_x,\; y + d_y)

Translations preserve size and shape. The image is always congruent to the original. Orientation is also preserved.

Rotation

A rotation turns a figure around a fixed point called the center of rotation by a given angle $\theta$ .

\begin{pmatrix} x' \\ y' \end{pmatrix} = \begin{pmatrix} \cos\theta & -\sin\theta \\ \sin\theta & \cos\theta \end{pmatrix} \begin{pmatrix} x - c_x \\ y - c_y \end{pmatrix} + \begin{pmatrix} c_x \\ c_y \end{pmatrix}

Rotations preserve distances and angles. Positive angles rotate counterclockwise. The image is congruent to the original.

Reflection

A reflection flips a figure across a mirror line. Each point and its image are the same distance from the line.

\text{Over } x\text{-axis: } (x,y) \to (x, -y)

\text{Over } y\text{-axis: } (x,y) \to (-x, y)

Reflections preserve size and shape (congruence) but reverse orientation. Reflecting twice across the same line returns to the original.

Dilation and Similarity

A dilation enlarges or shrinks a figure by a scale factor $k$ from a center of dilation.

(x, y) \to (c_x + k(x - c_x),\; c_y + k(y - c_y))

If $|k| > 1$ , the figure enlarges. If $|k| < 1$ , it shrinks. The image is similar but only congruent when $|k| = 1$ .