Recall how translate works as discussed on this page.
We use it in Ex. 1 to 'move' the red triangle to the right by 90px.
'translate' can also be used with the 'scale' function to create a mirror of a shape. First we create the shape, then create a mirror duplicate of it.
In the 1st example, the original (red) triangle is duplicated and moved horizontally to produce the blue triangle. Note that the 2 elements of the 'translate' function are the 'x' and 'y' coordinates of the new position.
In Ex.2, we start with a red triangle, but mirror it vertically directly below the original by altering the 'y' value of the translate attribute. The mirror action is obtained by setting the 'x' or 'y' axis to -1, depending on whether you want to flip the image horizontally or vertically. Thus we change the scale value of 'y' to -1 as follows:
With Ex. 3 we flip the image both vertically and horizontally, using -1 and -1 as the 'scale' units. Note we have to adjust the 'translate' attribute of x as well.
In the 4th example, we use the 'scale' function to mirror the shape, this time only horizontally.
Ex. 5 shows a duplicate shape to the right of the original red triangle. It is flipped both horizontally and vertically. This is the same action as Ex. 3, but moved horizontally, instead of vertically.
Note that both 'scale' values are '-1', to flip x & y, and the translate values are both negative. This is necessary to offset the effect of flipping an image, since it is flipped across the origin (0,0).
Scale is a transformation function that can alter the size of a shape. It typically takes 2 ordered arguments for the x and y dimensions. However, if only 1 value is used, the y value defaults to that value. This has the effect of maintaining the aspect ratio. The values can be positive or negative, depending on whether you wish to increase or decrease size. The values can also be fractional (decimal).
Ex. 6 is similar to the first example, only the scale factor is 1.5. Since only 1 value is used, it applies to both x and y dimensions, preserving the aspect ratio. After scaling, the triangle is then moved horizontally to the right. A negative value is used for the 'y' value to position it after scaling.
Don't forget that it is not the object that is changing, but the coordinate system. translate(100, 100) rotate (45) translate(-100, -100) doesn't mean that first you move the object by (100, 100), and then rotate it. It means that you shift the origin of the coordinate system by (100, 100), which has the opposite effect: the object which was supposed to be at (100, 100) suddenly finds itself right on the origin of the local coordinate system. – Sergiu Dumitriu Jun 28 '12 at 18:39
Another thing to note is that the rotation is also applied the other way around: rotate(45) rotates the line counter-clockwise, although the angle is positive and angles values are supposed to be clockwise. – Sergiu Dumitriu Jun 28 '12 at 20:32
In the 7th example, the 'skew' transformation is used to tilt the original red shape. In this case 'skewX(15)' tilts the shape 15° counter-clockwise to produce the blue polygon. Note that the 'x' or horizontal sides of the shape are unchanged.
Next Ex. 8 'skewY(30)' causes the shape to be tilted up by 15°, leaving the 'y' or vertical sides unchanged.
Finally in Ex. 9 we use 'skewX(15)' and 'skewY(15)' to tilt both the 'x' (horizontal) and 'y' sides (vertical) 15°.
All done.