matrix()

< css‎ | functions
Jump to: navigation, search

matrix()

This article is Almost Ready.



Summary

Defines a two dimentional transofmation in matrix format_ That is a function matrix(a,b,c,d,e,f) which holds 6 parameters as numbers each one controlling one tranformation factor_ In fact, matrix combines all the CSS tranformation 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

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

A 2-D 3×2 matrix with six parameters a, b, c, d, e, and f is equivalent to the following transformation matrix: File:2dmatrix.png 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


Requirements

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?

See also

Related articles

Transforms



































  • matrix()
















… further results


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]