CSS - matrix3d()

The matrix3d() CSS function describes a 3D transform as a 4x4 homogeneous matrix. The 16 parameters are described in the column-major order.

Example

 

TBD

Syntax  

CSS
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

Description  

The matrix3d() CSS function describes a 3D transform as a 4x4 homogeneous matrix. The 16 parameters are described in the column-major order.

Note: Until Firefox 16, Gecko accepted a <length> value for a4, b4 and c4.

 

a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 d4
Are <number> describing the linear transformation.
a4 b4 c4
Are <number> describing the translation to apply.
Cartesian coordinates on ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3
This transform applies to the 3D space and cannot be represented on the plan. Cartesian-coordinate matrix doesn't allow to represent a generic 3d affine transforms as translations are not linear transforms. a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/transform-function/matrix3d

CSS CSS Transforms NeedsCompatTable NeedsExample Reference