matrix()

Summary

Defines a two dimensional transformation in matrix format.

Examples

-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);

View live example

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

CSS Transforms Module, Level 3, Section 13.1

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]