When an object undergoes a transformation, the transformation can be represented as a
. Different transformations such as translations, rotations, scaling and shearing are represented mathematically in different ways. One matrix can also represent multiple transformations in sequence when the matrices are multiplied together.
A linear transformation on 2D (or 3D) space is a function f from 2D (or 3D) space to itself that has the property that
Let’s see an example of this: if the transformation has the following action on the coordinates:
From this example, we see that the linear transformation is exactly determined by the matrix whose first column is , whose second column is , and whose third column is , and that applying the function f is exactly the same as multiplying by the matrix. So the linear transformation is the matrix multiplication, and we can use the concepts of linear transformation and matrix multiplication interchangeably.
Transformations are usually not used by themselves, especially in graphics, so you need to have a way to compose transformations, as in . But if G is the matrix for the transformation g, and F is the matrix for the transformation f, then the matrix product G*F is the matrix for the composed functions gf.
For example, we have the translation represented by the matrix
which represents a move two units in the x direction and one unit in the y direction. If we want to then rotate the same object with the matrix
we can represent the combination of the two actions with a single composed matrix. This matrix is found by multiplying the second action by the first action.
So this matrix represents moving, then rotating an object in sequence.
Computer graphics works by representing objects in terms of simple primitives (link to the graphics primitives page) that are manipulated with transformations that preserve some primitives’ essential properties. These properties may include angles, lengths, or basic shapes. Some of these transformations can work on primitives with vertices in standard 2D or 3D space, but some need to have vertices in homogeneous coordinates. The general graphics approach is to do everything in homogeneous coordinates, but we’ll talk about the primitives in terms of both kinds when we can.
The most fundamental kinds of transformations for graphics are rotation, scaling, and translation. There are also a few cases when you might want to use shear transformations, so we’ll talk about these as well.
Rotation
[show more][hide]
A 2D rotation transformation rotates everything in 2D space around the origin by a given angle. In order to see what it does, let’s take a look at what a rotation by a positive angle does to the coordinate axes. Now (x,y) is the result when you apply the transformation to (1,0), which means that
But (x’,y’) is the result when you apply the transformation to (0,1), or

Then as we saw above, the rotation transformation must have the image of (1,0) as the first column and the image of (0,1) as the second column, or
or, as XKCD (http://xkcd.com/184/) sees it (notice that the rotation is by 90° and ,
<br
The situation for 3D rotations is different because a rotation in 3D space must leave a fixed line through the origin. In fact we really only handle the special cases where the fixed line is one of the coordinate axes. Let’s start with the easiest one.
A rotation around the Zaxis is a 2D rotation as above with the third dimension fixed. So the matrix for this rotation is pretty clearly
A rotation around the Xaxis is pretty similar. If we look down the Xaxis, we see the following 2D coordinates:

with , the axis of rotation. This looks like an exact analogue of the XYplane, and so we can see that the rotation matrix must leave X fixed and operate only on Y and Z as
For rotations around the Yaxis, the view down the Yaxis looks different from the one down the Zaxis; it is

Here a positiveangle is from the Xaxis towards the Zaxis, but , so the rotation axis dimension is pointing in the opposite direction from the Yaxis. Thus a the angle for the rotation is the negative of the angle we would see in the axes above, and since cos is an even function but sin is odd, we have the rotation matrix
around the Yaxis.
When you want to get a rotation around a different line than a coordinate axis, the usual approach is to find two rotations that, when composed, take a coordinate line into the fixed line you want. You can then apply these two rotations, apply the rotation you want around the coordinate line, and apply the inverses of the two rotations (in inverse order) to construct the general rotation. The sequence goes like this:
 apply a rotation around the Zaxis to move your fixed line into the YZplane
 apply a rotation around the Xaxis to move that line to the Yaxis
 apply the rotation by your desired angle around the Yaxis
 apply the inverse to move your rotation line back into the YZplane
 apply the inverse to move your rotation line back to the original line.
Whew! This can all be put into a function – or you can simply keep everything in terms of rotations around X, Y, and Z.
If we are working in homogeneous coordinates, we see that all of the rotation operations take place in standard 3D space and so the fourth coordinate is not changed. Thus the general pattern for all the rotations in homogeneous coordinates is
where the * terms are the terms from the 3D rotations above.
Scaling
[show more][hide]
Scaling is the action of multiplying each coordinate of a point by a constant amount. As an example, let . Then
So this is a linear transformation. If we look at what this transformation does to each of the coordinate vectors, we have
So the matrix for this transformation is
and, in general, a scaling matrix looks like
where the are the scaling factors for x, y, and z respectively.
In case of only 2D transformations, scaling simply scales down to two dimensions and we simply have
In case we are working with homogeneous coordinates, a scaling transformation only acts on the three primary components and leaves the homogeneous component alone, so we simply have the matrix

for the scaling transformation.
Translation
[show more][hide]
Notice that a translation function cannot be a linear transformation on normal space because it does not take the origin to the origin. These are examples of affine transformations, transformations that are composed of a linear transformation, such as a rotation, scaling, or shear, and a translation. In order to write a translation matrix, we need to use homogeneous coordinates.
If we want to add to the Xcoordinate and to the Ycoordinate of every point in 2D space, we see that

so that the matrix

gives a 2D translation.
The 3D case is basically the same, and by the same argument we see that the 3D translation is given by
hese are linear transformations in the space one degree higher than the geometry you are working with. In fact, the main reason for including homogeneous coordinates is the math for graphics is to be able to handle translations (and thus all basic transformations) as linear transformations represented by matrices.
Shear
[show more][hide]
The shear transformation is not widely used in computer graphics, but can be used for things like the oblique view in engineering drawings. The concept of a shear is to add a multiple of one coordinate to another coordinate of each point, or, for example,
The matrix for this shear transformation looks like
 .
In general, the matrix for a shear transformation will look like the identity matrix with one nonzero element A off the diagonal. If A is in row , column , then the matrix will add A times the coordinate of the vector to the coordinate.
For the oblique view of engineering drawings, we look at the shear matrices that add a certain amount of the zcoordinate to each of the x and ycoordinates. The matrices are

that take . The values of A and B are adjusted to give precisely the view that you want, and the zterm of the result is usually dropped to give the needed 2D view of the 3D object. An example is the classical cabinet view shown below:
To experiment with these transformations, we have two interactive applets. The first one lets you apply the 2D transformations to a 2D figure.
Transformation Matrix
The second applet lets you apply the 3D transformations to a 3D figure.
(Currently Unavailable)
Matrix Inverses
[show more][hide]
In general, getting the inverse of a matrix can be difficult, but for the basic graphics transformations the inverses are easy because we can simply undo the geometric action of the original transformation.
The inverse of the scaling matrix
is clearly
The inverse of a rotation transformation by angle is clearly the rotation around the same line by the angle . For example, the rotation matrix
has an inverse of
Note that and .
The inverse of the translation matrix

is clearly
The inverse of the simple shear transformation is also straightforward. Since a simple shear adds a multiple of one vector component to another component, the inverse only needs to subtract that multiple. So we have
and the 3D case is a simple extension of this.
So we have a major observation: If any transformation is the product of basic graphics transformations, it is easy to find the inverse of its matrix (and hence its inverse transformation) as the product of the inverses of the components in reverse order. Or:

Transformations and Graphics Environments
[show more][hide]
Attention – this concept needs a bit of programming background; it involves stacks.
When you are defining the geometry for a graphics image, you will sometimes want to model your scene as a hierarchy of simpler objects. You might have a desk, for example, that is made up of several parts (legs, drawers, shelves); the drawers may have handles or other parts; you may want to put several things on top of the desk; and so on. It’s common to define general models for each simple part, and then to put the pieces together in a common space, called the “world space.”
Each simple part will be defined in its own “model space,” and then you can apply transformations that move all the parts into the right place in the more complex part. In turn, that whole more complex part may be moved into another position, and so on – you can build up quite complex models this way. One common technique for this kind of hierarchical modeling is to build a “scene graph” that shows how everything is assembled and the transformations that are used in the assembly.
As an example, consider the simple picture of a bunny head, basically made up of several spheres. Each sphere is scaled (making it an ellipsoid of the right size), rotated into the right orientation, and then translated into the proper place. The tree next to the picture shows how this is organized.
In order to make this work, you have to apply each set of transformations to its own sphere and then “forget” those transformations so you can apply the transformations for the next piece. You could, of course, use inverses to undo the transformations, but that’s slow and invites roundoff errors from many multiplications.
instead, it is common to maintain a “transformation stack” that holds the history of every place you want to get back to – all the transformations you have saved. This is a stack of 4x4 matrices that implement the transformations. You also have an active transformation to which you apply any new transformations by matrix multiplication.
To save a transformation to get back to later, you push a copy of the current active transformation (as a 4x4 matrix) onto the stack. Later, when you have applied whatever new transformations you need and want to get back to the last saved transformation, you pop the top matrix off the stack and make it the current active transformation. Presto – all the transformations you had used since the corresponding push operation are gone.
So let’s get back to the rabbit. We want to create the rabbit head, and we have whatever active transformation was in place when we wanted to draw the head. Then we have
 push
 scale
 sphere for main part
 pop
 push
 translate
 scale
 sphere for left eye
 pop
 push
 Translate
 Scale
 sphere for right eye
 pop
 push
 Translate
 Rotate
 Scale
 sphere for left ear
 pop
 push
 Translate
 Rotate
 Scale
 sphere for right ear
 pop
Notice something important: the transformations are written in the order they are applied, with the one closest to the geometry to be applied first. The right ear operations are really Translate(Rotate(Scale(sphereforrightear)))
If you are not familiar with stacks, this won’t make much sense, but you don't need to understand this to understand basic transformation concepts. A simple way to look at these stacks is to notice that a transformation is a 4x4 matrix or, equivalently, a 16element array, so maintaining a stack is simply a matter of building an array
 float transStack[N][16];
or
 float transStack[N][4][4];
where N is the number of transformations one wants to save.
Messages to the Future
When there is a page for 2D, 3D, 4D real spaces; affine spaces; homogeneous coordinates, this page should link to that page.
Page written by Steve Cunningham.