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