Windows apps
Collapse the table of content
Expand the table of content
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

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:
© 2017 Microsoft