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
CSS Functions
- attr()
- blur()
- brightness()
- calc()
- circle()
- contrast()
- drop-shadow()
- ellipse()
- grayscale()
- hsl()
- hsla()
- hue-rotate()
- inset()
- invert()
- linear-gradient()
- matrix()
- matrix3d()
- opacity()
- perspective()
- polygon()
- radial-gradient()
- repeating-linear-gradient()
- repeating-radial-gradient()
- rgb()
- rgba()
- rotate()
- rotate3d()
- rotateX()
- rotateY()
- rotateZ()
- saturate()
- scale()
- scale3d()
- scaleX()
- scaleY()
- scaleZ()
- sepia()
- skew()
- skewX()
- skewY()
- translate()
- translate3d()
- translateX()
- translateY()
- translateZ()