matrix()

< css‎ | functions
Jump to: navigation, search

matrix()

This article is Ready to Use.



Summary

Defines a two dimensional transformation in matrix format.



Compatibility

There is no data available for topic "css", feature "matrix()". If you think that there should be data available, consider opening an issue.

Examples

View live example

CSS

-webkit-transform: matrix(1, 0, 0.5, 1, 10, 0);
-o-transform: matrix(1, 0, 0.5, 1, 10, 0);
transform: matrix(1, 0, 0.5, 1, 10, 0);

Notes

Remarks

This function defines a two dimensional transformation in matrix format.

That is, a function matrix(a,b,c,d,e,f) which holds 6 parameters as numbers, each one controlling one transformation factor. In fact, matrix() combines all the CSS transformation functions (translate, skew, etc.) in one command. For example, the new position of a point (x,y) will be such that:
newX = a*x + c*y + e
and
newY = b*x + d*y + f

For more information about transformation matrices, see Mathematical Description of Transform Functions, in the CSS3 Transforms specification.

Syntax

matrix ( <number> , <number> , <number> , <number> , <number> , <number> )

Parameters

number
A matrix value.

Standards information

See also

Related pages (MSDN)

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]