matrix()
Quick Summary for matrix()
The matrix() CSS function defines a homogeneous 2D transformation matrix. Its result is a <transform-function> data type.
Code Usage for matrix()
matrix(a, b, c, d, tx, ty) 
More Details for matrix()

matrix()

The matrix() CSS function defines a homogeneous 2D transformation matrix. Its result is a <transform-function> data type.

Note: matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

Syntax

The matrix() function is specified with six values. The constant values are implied and not passed as parameters; the other parameters are described in the column-major order.

matrix(a, b, c, d, tx, ty) 

Values

a b c d

Are <number>s describing the linear transformation.

tx ty

Are <number>s describing the translation to apply.

Cartesian coordinates on ℝ^2 Homogeneous coordinates on ℝℙ^2 Cartesian coordinates on ℝ^3 Homogeneous coordinates on ℝℙ^3
( a c b d ) ( a c tx b d ty 0 0 1 ) ( a c tx b d ty 0 0 1 ) ( a c 0 tx b d 0 ty 0 0 1 0 0 0 0 1 )
[a b c d tx ty]

The values represent the following functions: matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

Examples

HTML

<div>Normal</div> <div class="changed">Changed</div> 

CSS

div {   width: 80px;   height: 80px;   background-color: skyblue; }  .changed {   transform: matrix(1, 2, -1, 1, 80, 80);   background-color: pink; } 

Result

Specifications

Specification
CSS Transforms Module Level 1 # funcdef-transform-matrix

See also

transform <transform-function> matrix3d() Understanding the CSS Transforms Matrix

Last modified: Jan 31, 2022, by MDN contributors

Select your preferred language English (US)Français日本語한국어PolskiPortuguês (do Brasil)中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Most people can do absolutely awe-inspiring things,” he said. “Sometimes they just need a little nudge.
Unknown
Random CSS Property

grid-column-end

The grid-column-end CSS property specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.
grid-column-end css reference