This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

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

See also

Related pages

Attributions