Attributes: Transform

Transform

The transform attribute is a powerful one that allows us to change the properties of an element in several different ways.

• translate: Where the element is moved by a relative value in the x,y direction.
• scale: Where the element’s attributes are increased or reduced by a specified factor.
• rotate: Where the element is rotated about its reference point by an angular value.

Without a degree of prior understanding, these transforms can appear to behave in unusual ways. But hopefully, we’ll explain it sufficiently here so that you can appreciate the logic in the way they work.

transform (translate(x,y))

The transform-translate attribute will take an element’s position and adjust it based on a specified value(s) in the x,y directions.

The best way to illustrate this is with an example:

This is the code snippet that draws a circle at the position 200,100 (cx,cy):