matrix3d

Summary

Defines a three-dimensional transformation in matrix format. The function requires exactly 16 comma-separated numbers as parameters; these represent the matrix values in “column-major” (top to bottom, then left to right) order.

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

Notes

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.

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

CSS Transforms Module, Level 3, Section 13.2

Attributions

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