Birrel - 6 months ago 17

CSS Question

When using the transform property in CSS, one of the possible methods is the

`matrix`

`#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

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.