matrix()

< css‎ | functions
Jump to: navigation, search

matrix()

This article is Ready to Use.


Summary

Defines a two dimensional transformation in matrix format.

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]