# Types of Affine Transformations

## List of basic affine transformations:

The following list gives other possible entries in the transform tag:

• translate(X,Y): Represents the translation (x,y)(x+X,y+Y).
• scale(s): Represents uniform scaling, (x,y)(sx,sy).
• scale(s,t): Represents scaling the coordinates by different amounts, (x,y)(sx,ty).
• rotate(θ): Represents rotation around the origin, (x,y) ( x cos(θ)-y sin(θ), x sin(θ) + y cos(θ) ).
• rotate(θ,X,Y): Represents rotation around the point (X,Y), i.e. (x,y) ( X + (x-X) cos(θ)-(y-Y) sin(θ), Y + (x-X) sin(θ) + (Y-y) cos(θ) ).
• skewX(θ): Represents a shear which preserves the horizontal direction and shifts the vertical direction by angle θ, i.e. (x,y)( x + y sin(θ), y).
• skewY(θ): Represents a shear which preserves the vertical direction and shifts the horizontal direction by angle θ, i.e. (x,y)( x, y + x sin(θ)).

It is worth remarking that computer scientists work with a different coordinate system than mathematicians: The y-coordinate increases in the downward direction. So, the transformations may not do exactly what you are used to.

## Concatenating transformations:

My favorite thing about the transform attribute is that you can concatenate transforms by putting a space in between them. Many of the above types of transforms are illustrated in the following example, followed by translations which move them to a place where you can see them:

Source of pumpkin-transform.svg:Hide line numbers
```01: <svg version="1.1" baseProfile="full"
02:      width="654px" height="480px" viewBox="-102 -112 654 480"
04:
05: <defs>
06:    <g id="Pumpkin">
07:       <circle cx="0" cy="0" r="100" fill="orange" stroke="black" stroke-width="1px"/>
08:       <rect x="-10" y="-110" width="20" height="20" fill="darkgreen" stroke="black" stroke-width="1px"/>
09:       <circle cx="-30" cy="-30" r="20" fill="black"/>
10:       <circle cx="30" cy="-30" r="20" fill="black"/>
11:       <polygon points="0,0 20,25 -20,25" fill="black"/>
12:       <line x1="-60" y1="60" x2="60" y2="60" stroke-width="10px" stroke="black"/>
13:    </g>
14: </defs>
15: