matrix()

< css‎ | functions
Jump to: navigation, search

matrix()

Content Cleanup: The Summary_Section template isn't displaying, so I've duplicated the summary in the main content. If you can fix the template, delete the duplicate!


Needs Summary: This article does not have a summary. Summaries give a brief overview of the topic and are automatically included on some listing pages that link to this article.


Summary

Defines a two-dimensional transformation in matrix format. For the function matrix(a,b,c,d,e,f), 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. The matrix parameters are specified as numbers (no units); the e and f constant factors are interpretted as pixel lengths.

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]