# matrix() CSS Function

### Description

The CSS `matrix()` function is used to define a 2D transformation matrix. It takes six parameters, which represent the following:

• `a`: Horizontal scaling
• `b`: Horizontal skewing
• `c`: Vertical skewing
• `d`: Vertical scaling
• `e`: Horizontal translation
• `f`: Vertical translation

The `matrix()` function can be used to perform any combination of 2D transformations, such as scaling, rotating, skewing, and translating. It is a powerful tool for creating complex visual effects.

Here is an example of how to use the `matrix()` function to rotate an element by 45 degrees:

``````.element {
transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0);
}
``````

This will transform the element so that it is rotated 45 degrees clockwise around its origin.

The `matrix()` function can also be used to perform more complex transformations, such as skewing and shearing. For example, the following code will skew the element so that it is stretched horizontally and compressed vertically:

``````.element {
transform: matrix(1.5, 0, 0, 0.5, 0, 0);
}
``````

The `matrix()` function is a powerful tool for creating complex visual effects. It can be used to perform any combination of 2D transformations, such as scaling, rotating, skewing, and translating.

### Benefits of using the `matrix()` function

There are several benefits to using the `matrix()` function instead of individual transformation functions such as `scale()`, `rotate()`, `skew()`, and `translate()`:

• It is more concise and efficient.
• It allows you to perform multiple transformations at once.
• It gives you more control over the transformation matrix.

### Drawbacks of using the `matrix()` function

The main drawback of using the `matrix()` function is that it can be difficult to use correctly. The six parameters can be confusing, and it can be difficult to visualize the resulting transformation.

Here are some tips for using the `matrix()` function:

• Use the `transform-origin` property to specify the origin of the transformation. This will help you to visualize the resulting transformation.
• Use the `calc()` function to perform calculations on the six parameters. This can make it easier to create complex transformations.
• Use a CSS preprocessor such as Sass or LESS to create functions that abstract the complexity of the `matrix()` function.

Overall, the `matrix()` function is a powerful tool for creating complex visual effects. However, it can be difficult to use correctly. It is important to understand the six parameters and how they affect the transformation matrix.

### Syntax

```transform: matrix( <number> [, <number> ]{5,5} )
matrix(a, b, c, d, e, f)```

### Values

• <number>The matrix() function accepts the six number values a-f. Here is what they represent:
• a & d - The arguments a and d represent how the element is scaled in the x and y direction respectively (just like in scale(a, d)).
• b & c - The arguments b and c represent how the element is skewed (just like in skew(b, c)).
• e & f - The arguments e and f represent how the element is translated in the x and y direction respectively (just like in translate(e, f)).

### Example

``<img class="matrix" src="images/nature.jpg" alt="Nature Image">``
``````.matrix {
transform-origin: 0 0;
transform: matrix(0.7, 0.7, -0.7, 0.7, 150, 0);
}``````

### Browser Support

The following table will show you the current browser support for the CSS `matrix()` function.

 Desktop 12 1 3.5 10.5 3.1
 Tablets / Mobile 18 4 11 3.2 1 2

Last updated by CSSPortal on: 7th October 2023