Current Transform Matrix in CSS

So far, we’ve discussed transform functions separately, but they can also be combined. Want to scale and rotate an object? No problem: use a transform list. For example:

.rotatescale {

transform: rotate(45deg) scale(2);


Order matters when using transform functions. This is a point that’s better shown than talked about, so let’s look at an example to illustrate. The following CSS skews and rotates an element:

.transformEl {

transform: skew(10deg, 15deg) rotate(45deg);


It gives us the result you see below.

What happens if you rotate an element first and then skew it?

.transformEl {

transform:    rotate(45deg) skew(10deg, 15deg);


The effect is quite different, as seen below.

Each of these transforms has a different current transform matrix created by the order of its transform functions. To fully understand why this is, we’ll need to learn a little bit of matrix multiplication. This will also help us understand the matrix() and matrix3d() functions.

Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.

Leave a Reply

Your email address will not be published. Required fields are marked *