matrix3d() function

Specifies a 3-D transformation as a 4×4 homogeneous matrix of sixteen values in column-major order.

CSS Transforms Module, Level 3, Section 13.2Internet Explorer 10

 

Syntax

matrix3d

( <number> , <number> , <number> , <number> , <number> , <number> , <number> , <number> , <number> , <number> , <number> , <number> , <number> , <number> , <number> , <number> )

Parameters

number

A matrix value.

Standards information

Remarks

All other transformation functions are based on the matrix3d function. It is a good idea to become familiar with transform coordinate systems and rendering before attempting to specify 3-D transforms manually.

Examples

The following code snippet is an example of the matrix3d function in use. When applied to a square blue div element, it has the effect illustrated in the image.


div {
  transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
}

A square blue div with white text, after having the following transform function applied to it: -ms-transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);

See also

Transform Functions
Mathematical Description of Transform Functions
Direct3D: Matrices

 

 

Show:
© 2014 Microsoft