matrix() CSS Function

Description

The matrix() CSS function can be used with CSS transforms to style elements in a two-dimensional space.

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

Desktop
Explorer Edge Chrome Firefox Opera Safari
??????
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
??????