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

CSS

Copy Code

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

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 ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
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.	$(\begin{matrix} a1 & a2 & a3 & a4 \\ b1 & b2 & b3 & b4 \\ c1 & c2 & c3 & c4 \\ d1 & d2 & d3 & d4 \end{matrix})$

© 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