How do I use the matrix transform and other transform CSS properties?

Question

When using the transform property in CSS, one of the possible methods is the matrix method that requires 6 input fields. The CSS code would look something like

Answer 1

Instead of spending time trying to wrap your head around matrices when you don't have a mathematical background I recommend understanding the other transforms and knowing how to combine them in one line since if you try breaking them apart only the last directive is executed.

Instead of this

#shape {
    transform: rotate(40deg);
    transform: translate(100px, 30px);
    transform: scale(0.8, 0.4);
}

Do this instead:

#shape {
    transform: rotate(40deg) translate(100px, 30px) scale(0.8, 0.4)
}

And that gives you your desired result which you can wrap your head around and has as much power as the matrix.