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...

#test{     transform: matrix(1, 0, 0, 1, 0, 0); } 

There are also a couple other variations (depending on the browser)...

-ms-transform: matrix(1, 0, 0, 1, 0, 0);  -webkit-transform: matrix(1, 0, 0, 1, 0, 0); 

I know that the values shown above are the stock values for an object, but what do all the numbers mean or do?

Answer 1

The transformation property mentioned above falls in the 2D Transforms category of CSS properties. Along with the matrix() method mentioned above, there are a few other methods that accompany transform:

translate(), rotate(), scale() and skew()

To understand the matrix() method, it is best to understand the other four types first.

TRANSFORMS:

These four methods for transformation are exactly as they sound.

TRANSLATE:

Check out translate example here.

translate(e, f) takes in two arguments. The first argument is the x-position of the element, while the second is the y-position - both relative to its initial position. If you wanted to move an element 50px to the right and 100px down, the CSS would look like transform: translate(50px, 100px);. Positive X is right, positive Y is down; negative numbers move the element in the opposite direction.

ROTATE:

Check out rotate example here.

rotate(c) takes in one argument, which is the amount of rotation you'd like the element to have. Positive rotation is clockwise, negative is counterclockwise. Rotating an element 30 degrees clockwise (positive) would look like transform: rotate(30deg);. Note that this time the argument is in deg and not px.

SCALE:

Check out scale example here.

scale(a, d) takes in two arguments. The first argument is the amount to scale in the X-direction, while the second argument is the amount to scale in the Y-direction. Scaling works by multiplying the current value (width, height) by the scale value. Scaling an element by 2 times in the X-direction and 4 times in the Y-direction would look like transform: scale(2, 4);. The arguments can be any value, including decimals, and even negative. Negative values have the effect of flipping the element about the respective axis.

SKEW:

Check out skew example here.

skew(b, c) is potentially the most confusing transformation to explain. skew(c, d) takes in two arguments. The first argument corresponds to the horizontal surfaces (top and bottom), while the second argument corresponds to the vertical surfaces (left and right). Both arguments are in deg, similar to that of rotate(). Positive values for the first argument will rotate the vertical surfaces counterclockwise about their center points. Negative values will rotate the vertical surfaces clockwise about their center points. Positive values for the second argument rotate the horizontal surfaces clockwise about their center points, while negative values rotate the horizontal surfaces counterclockwise. The limit (in deg) for each argument is +-90deg - as seen in the following example.

MATRIX:

Check out matrix example here.

matrix(a, b, c, d, e, f) does everything that the previously listed transformation do.

The two arguments, a and d are for scaling the element in the X-direction and the Y-direction, respectively. Identically to that of the scale(a, d) method.

The second and third arguments b and c are for skewing the element. The two values work identically to that of the skew(b, c) method.

Finally, the last two arguments e and f are for translating the element in the X-direction and the Y-direction, respectively. Identically to that of the translate(e, f) method.

You can use the matrix() transformation to achieve an incredible amount effects. Take a look at this website, where scrolling down the page (on computers, not mobile devices) causes elements on the page to transform via the matrix() method. It makes for a great effect!

Finally, there are different syntax for different browsers. According to w3schools here they are the following

transform: -ms-transform: /* IE 9 */ -webkit-transform: /* Safari and Chrome */ 

The best practice is to test them on various browsers before launching your site.

For further information about various 2D Transformations, check out this link. For the mathematics behind the matrix() method, check out this link.

Answer 2

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.