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
?	?	?	?	?	?
Tablets / Mobile
?	?	?	?	?	?

Last updated by CSSPortal on: 1st December 2019