'Translate' is a useful but tricky attribute that can be used to simulate a 'move' for any shape.
We say 'simulate' because it is NOT the object that is moved, but the coordinate system. Thus a 'translate(50,50)' command moves the origin of the original coordinate system to (50,50). Setting any x or y coordinates after this 'translates' to increasing each value by 50. For example 'x=30 y=30' is now interpreted as 'x=80 y=80'. This results in the shape appearing to move to (80,80) in the original coordinate system.
The 1st example here uses 'translate' to 'move' a rectangle.
The original vertical rectangle (red) is first 'translated' (duplicated) and moved 30px right, then filled using a different color. Next the same rectangle is translated and moved 60px right, and filled using another color.
The code for the 3 vertical rectangles:
Note the 'x' coordinate increases for all 3 'translate' units in this case.
In the 2nd example we start with a horizontal red rectangle. Using the 'transform / translate' commands, we duplicate it twice and move it down, while changing the fill color each time.
Code to produce the 3 horizontal rectangles:This time the 'y' coordinate is increased with each 'translate' method.
Ex. 3 uses the 'rotate' method. Beginning with a vertical red rectangle, we rotate it counter-clock-wise about a common point, while filling it with a different color each time.
The 3 arguments to the 'rotate' method are: angle, x, y. In this case only the angle changes.
We first create a rectangle (red) 20x40px. Using the 'scale' method of the 'transform' function, we then scale the x or horizontal dimension by factors of 2, 3, and 5, while leaving y (vertical dimension) the same.
The very last rectangle is vertically scaled to 1/2 the height. Both x and y coordinates have to be used, but only the y coordinate had to be altered.
Note that the arguments to the 'scale' method are the (x,y) scaling factors.
All done.