The matrix3d()
CSS function defines a 3D transformation as a 4x4 homogeneous matrix. Its result is a <transform-function>
data type.
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)
a1
b1
c1
d1
a2
b2
c2
d2
a3
b3
c3
d3
d4
<number>
s describing the linear transformation.a4
b4
c4
<number>
s describing the translation to apply.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. | $\left(\begin{array}{cccc}a1& a2& a3& a4\\ b1& b2& b3& b4\\ c1& c2& c3& c4\\ d1& d2& d3& d4\end{array}\right)$ |
TBD
Please see the <transform-function>
data type for compatibility info.
© 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