W3cubDocs

/CSS

matrix3d()

The matrix3d() CSS function defines a 3D transformation as a 4x4 homogeneous matrix. Its result is a <transform-function> data type.

Syntax

The matrix3d() function is specified with 16 values. They are described in the column-major order.

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

Values

a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 d4
Are <number>s describing the linear transformation.
a4 b4 c4
Are <number>s describing the translation to apply.
Note: Until Firefox 16, Gecko accepted a <length> value for a4, b4 and c4.
Cartesian coordinates on ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3
This transformation applies to the 3D space and can't be represented on the plane. A generic 3D affine transformation can't be represented using a Cartesian-coordinate matrix, as translations are not linear transformations. a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4

Examples

TBD

Browser compatibility

Please see the <transform-function> data type for compatibility info.

See also

Edit this page on MDN

© 2005–2018 Mozilla Developer Network and individual 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