Transforms are used a lot in graphics on the web, they allow us to alter the positions and shapes of objects. What's actually happening?
Rectangular array of values, form the basis of calculations. Underlying representation of transforms, apply a matrix to a point to get the new location of the point - maps one set of coords to another.
As matrixes have rows you can apply each row of the transform to each corresponding component of the coordinate. I.e. the [x, y] of a coord. However, 2D points still have three points - used for the perspective, normally 1 at all times. Transform matrix must have same number of rows as point has columns.
Start with an
0,0 origin in the top left, then define
x,y. If we change the origin we get a different effect when applying a transform, the
y are different. CSS and Canvas/SVG have different default origins.
Representation of transforms
The definition of transform properties (e.g.
translate()) map onto values in the transform matrix. For a rotate transform the values in the matrix will be
cos(). Skew/sheer transform uses
tan() of the opposite coord (e.g x =>
tan(y), y =>
If we apply more than one transform to an object then we multiply the individual transformation matrixes together before applying to the points. The order in which the transforms are applied matters. When you do this with a lot of transforms it gets very hard to reason about.
The principle is the same but we now have more maths - not more complex, just more volume.