Matrices and how to use them in CSS
What matrices are, and how to use them in CSS 2D transformations.
In the April of this year, I finally decided to commit to an official Computer Science degree, after looking around I set my heart on BSc from University of London as they had a UX specialism, and that meant I could stick with my hybrid skillset, while deepening an understanding of technologies behind every platform I might ever have the joy to design for.
Long story short, as much as I love learning new things, certain mathematical concepts proved quite difficult to sink in, as you quite rarely get to practice them as a designer or a front-end dev. One of those, for me, were matrices and the transformations they create. To my pleasant surprise, however, while working with CSS transformations, among the usual scale and skew, I noticed matrix and matrix3d. This article is about transformations you can create with matrix and how they work.
What are matrices?
If you have a solid mathematical background, you will know what matrices are and their application in graphical transformations. Matrices are rows and columns of numbers (or symbols), making complex calculations available in fewer steps.
The dimensions are defined by the number of rows and columns contained within the matrix, written as #rows by #columns.
How are matrices used for transformations?
That’s all great, but how exactly do they work to transform points and objects? This has to do with computation, you can multiply matrices with other types of numbers, but only as long as the number of rows is the same as the number columns in the matrix. So, you can multiply a 3x3 matrix with any data that has 3 rows. The most common type of data, in this case, is a vector, or a point on an XY-plane. Multiplying your point or vector by the matrix will result in a new, transformed point or vector.
To multiply matrices, we multiply every n-th entry in a row, by its respective n-th number in a column, and then add all the results together to get a new matrix entry.
Seeing that in transformations we want the output to have the same number of elements as the inputted vector or point, we need to use 3x3 matrices and 3x1 points. To do that while only using 2D transformations, we need to use the third placeholder value for z-plane, that doesn’t affect the rest of the transformation. For a vector, we simply add a third value of 1, and for a matrix, we add another row and column from a 3x3 identity matrix. An identity matrix is simply a matrix with equal number of rows and columns that multiplied by the matrix with the same proportions, doesn’t change that matrix.
Now that we know how to apply a matrix to some point or vector to get it transformed, let’s have a look at what values we need to use in the 4 given digit slots, we can use them for dilation, rotation, reflection, and skew.
As you can guess, as soon as you remember the respective slots you can adjust your values as needed.
Writing 2D matrices in CSS
Obviously CSS can’t support multiple rows and columns for your values, so we need to rewrite our matrices to fit into a single line:
Basically we only use the top 6 digits, going from top to the bottom column by column. So the reflection on the x-axis will be written as transform: matrix(1,0,0,-1,0,0) , while anti-clockwise rotation by an angle of 90 degrees will be written as transform: matrix(0,-1,1,0,0,0) .
The last 2 digits, e, and f, respectively, are simple translations by pixels among x and y axes, if you want to move your object 100px to the right, you can use matrix(1,0,0,1,100,0) and if you want to move it 100px down, as you may have guessed you need to use matrix(1,0,0,1,0,-100) .
One thing to keep in mind, however, is that the object you apply a transformation to is the plane, not just a point, so the whole object will be flipped or translated.
Here’s a pen with some basic transformations for you to play around with, you can try combining them into one to see the effects it gives:
Although arguably more difficult to memorize than properties like rotate or skew, using matrices in CSS can provide you with a way of using one single transformation for more complex animations instead of applying multiple ones. Matrices are also the basis of all graphic transformations, so memorizing how they work in CSS can help you better understand how other types of computer graphics work.
If working in 2D seems basic, you can also go ahead and try playing around with matrix3d property that adds a whole another dimension but works in a very similar way.
Helpful resources:
- Khan academy — Matrices as transformations
- CSS matrix generator
