The matrix3d() CSS function is a powerful tool used to define a 3D transformation as a 4x4 matrix, allowing precise control over how an element is manipulated in three-dimensional space. Unlike simpler functions like translate3d() or scale3d(), which handle specific transformations, matrix3d() lets you combine translations, rotations, scaling, and skewing in a single function, giving you granular control over complex animations and visual effects.

The function takes 16 numerical values that correspond to the elements of a 4x4 transformation matrix. These values define how the element is positioned, rotated, and scaled along the X, Y, and Z axes, as well as how it is affected by perspective. For instance, modifying the third row or fourth column of the matrix can introduce perspective effects, which can create a sense of depth when applied to elements in a scene.

matrix3d() is often used with the transform property to apply transformations directly to an element. For example, you could use it to rotate an element around multiple axes while simultaneously scaling it:

.box {
  transform: matrix3d(
    1, 0, 0, 0,
    0, 0.866, -0.5, 0,
    0, 0.5, 0.866, 0,
    0, 0, 0, 1
  );
}

This example rotates the element around the X and Y axes, demonstrating how the matrix values correspond to transformations in 3D space.

matrix3d() is particularly useful when you need precise, programmatically generated transformations, such as in WebGL-inspired animations or interactive 3D interfaces. However, because of its complexity, it is often generated through JavaScript or tools rather than manually written. It is compatible with any div or block-level element that can be transformed, and works seamlessly with other transformation functions when used in the transform property.

If desired, matrix3d() can also be animated using transition or animation to create smooth 3D effects.