X += x*a | Y += x*d | Z += x*g | X += x+C(j) |
X += y*b | Y += y*e | Z += y*h | Y += y+C(k) |
X += z*c | Y += z*f | Z += z*i | Z += z+C(m) |
Projection to X | Projection to Y | Projection to Z | Scale |
X-Magnitude(Width) | X-Shear(Horiz. Skew) | X-pos of foreshortening point | X-transpose |
Y-Shear(Vert. Skew) | Y-Magnitude(Height) | Y-pos of foreshortening point | Y-transpose |
X->Z-axis Shear | Y->Z-axis Shear | Z-Magnitude | Z-transpose |
X-perspective Projection(Depth of field)(Horiz. Keystone) | Y-Perspective Projection(Depth of field)(Vert. Keystone) | Z-Perspective Projection | Scale |
Remember that when reading a matrix, you start at the top left and read downward. This doesn't match the CSS well, so here's the conversion (values update live from sliders) :
transform: matrix3d(
, , , ,
, , , ,
, , , ,
, , , );