20 / 30

What’s the difference between matrix() and matrix3d()?

Comparing matrix() and matrix3d() in CSS Transforms

Both matrix() and matrix3d() are CSS transform functions used to apply complex transformations by defining mathematical transformation matrices. The main difference is that matrix() handles 2D transformations, while matrix3d() handles 3D transformations that include depth (the Z-axis).

The matrix() function allows you to combine multiple 2D transforms such as scaling, rotating, skewing, and translating in a single statement using six parameters.

Syntax (2D)

Parameters

1
a, d — control scaling on the X and Y axes.
2
b, c — control skewing.
3
tx, ty — control translation along the X and Y axes.

Example

The matrix3d() function extends this concept to 3D space, allowing rotations, translations, scaling, and perspective effects along all three axes (X, Y, and Z). It uses 16 parameters that define a 4×4 matrix.

Syntax (3D)

Although writing a matrix3d() by hand is rare (since it’s complex), browsers use it internally when multiple 3D transformations like rotateX(), rotateY(), or translateZ() are combined.

Example: Using matrix3d() for 3D Rotation

matrix() vs matrix3d()

1
matrix() — works only in 2D space (X and Y axes).
2
matrix3d() — extends transformations into 3D space, adding depth via the Z-axis.
3
matrix3d() uses 16 values compared to 6 in matrix().
4
matrix3d() supports perspective and 3D rotations like rotateX() and rotateY().

Best Practices

1
Use matrix() for 2D animations and transformations (simple UI effects).
2
Use matrix3d() when working with 3D rotations, perspective, or depth.
3
Avoid writing raw matrices manually — instead, combine CSS transform functions and let the browser compute the equivalent matrix.

In summary, matrix() is for 2D transformations, while matrix3d() enables full 3D manipulation with perspective — both offering advanced control for transitions and animations.