csslinear-algebra

Can someone explain how the css matrix transform works mathematically?

From: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix

writing the css property

transform: matrix(a, b, c, d, tx, ty)

is equivalent to matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()).

It is also equivalent to the following matrix for homogenous coordinates on RP^2 or Cartesian coordinates on R^3

a   c   tx
b   d   ty
0   0   1

Here's what doesn't make sense to me: it's possible to apply this matrix transform on a 2D vector, e.g. (x,y), (width,height), an html element with a 2D position.

This shouldn't be possible because the columns of the matrix must match the number of rows in the vector.

So how is this being calculated? There is also a definition for cartesian coordinates on R^2 but it discards tx and ty which are definitely being calculated in the examples on a 2D element.

I have one specific question: What mathematical operation is being used here? It cannot be basic matrix multiplication because the matrix columns do not not match the vector dimensions. Yet they represent this as a transformation matrix. So it is using some kind of linear algebra I do not know most likely. What is the math?

Solution

  • Answering my own question as I have discovered more thanks to other comments and also time.

    This is because it is representing in a homogeneous coordinate system.

    Problem: a translation is not a linear transformation because it changes the origin. In a linear system, T(0,0) == (0,0) but a translation makes it so T(0,0) != (0,0)

    Solution 1: using a cartesian coordinate system, perform 2D matrix multiplication, and then add the translation:

    M*p+tr

# where
M = a 2x2 marix
p = a 2D point (x,y)
tr = a translation (tx, ty)

    Solution 2: Another solution is to use a homogenous coordinate system which will move the problem up one dimension

    M*p

M = a 3x3 matrix
p = a 3D vector that represents a 2D point (x,y,1)

    The resulting matrix multiplication will perform a linear transformation of p by shearing in the 3rd dimension.

    This can be generalized to 3D graphics as well, and is why in 3D graphics programming you will often see Vector4s.

    YouTube videos for more information:

    Why use 4x4 matrices for 3D graphics? A good place to start https://www.youtube.com/watch?v=Do_vEjd6gF0

    Quick understanding of homogeneous coordinates https://www.youtube.com/watch?v=o-xwmTODTUI