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

Question

Accepted Answer

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. transform: matrix(a, b, c, d, tx, ty); `a`, `d` — control scaling on the X and Y axes. `b`, `c` — control skewing. `tx`, `ty` — control translation along the X and Y axes. .box2d {
  width: 100px;
  height: 100px;
  background: coral;
  transform: matrix(1, 0.3, 0.3, 1, 50, 50);
  transition: transform 0.5s ease;
} 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. transform: matrix3d(a1, b1, c1, d1,
                    a2, b2, c2, d2,
                    a3, b3, c3, d3,
                    a4, b4, c4, d4); 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. .box3d {
  width: 100px;
  height: 100px;
  background: lightblue;
  transform: matrix3d(0.866, 0, 0.5, 0,
                      0, 1, 0, 0,
                      -0.5, 0, 0.866, 0,
                      0, 0, 0, 1);
  transition: transform 0.8s ease;
} `matrix()` — works only in 2D space (X and Y axes). `matrix3d()` — extends transformations into 3D space, adding depth via the Z-axis. `matrix3d()` uses 16 values compared to 6 in `matrix()`. `matrix3d()` supports perspective and 3D rotations like `rotateX()` and `rotateY()`. Use `matrix()` for 2D animations and transformations (simple UI effects). Use `matrix3d()` when working with 3D rotations, perspective, or depth. 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.

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

Comparing matrix() and matrix3d() in CSS Transforms

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

Comparing matrix() and matrix3d() in CSS Transforms

Scenario Questions

Follow-up Questions