The matrix3d()
function is a 3D transform function that is used to describe a sequence of three-dimensional transforms in a 4×4 grid.
For example, instead of using two or more transform functions in one declaration like so:
transform: rotate3d(1, 0, 1, 45deg) translate3d(24px,25px, 100px);
Using the matrix3d()
function, we can combine these two transformations into one matrix:
transform: matrix3d(0.8535533905932737, 0.4999999999999999, 0.14644660940672619, 0, -0.4999999999999999, 0.7071067811865476, 0.4999999999999999, 0, 0.14644660940672619, -0.4999999999999999, 0.8535533905932737, 0, 22.62994231491119, -20.3223304703363, 101.3700576850888, 1)
As you can see, calculating the values of the matrix3d()
function wouldn’t be easy if you’re not math-savvy. These calculations were also probably not meant to be done by hand. Luckily, Eric Meyer and Aaron Gustafson created a very useful tool which can do the calculations for you—all you do is enter the transformations you want and the click the red button for the tool to generate the equivalent matrix()
function for you.
The official syntax is as follows:
transform: matrix3d( <number> [, <number> ]{15,15} );
For understanding how to use the transform function, you can read the CSS Transform entry.
Browser Support
The following is the support table for three-dimensional CSS transforms:
CSS3 3D Transforms
Method of transforming an element in the third dimension using the `transform` property. Includes support for the `perspective` property to set the perspective in z-space and the `backface-visibility` property to toggle display of the reverse side of a 3D-transformed element.
W3C Working Draft
Supported from the following versions:
Desktop
- 36
- 16
- 10
- 23
- 15
Mobile / Tablet
- 15
- 130
- No
- 130
- 130