css matrix3d code example

Example: use matrix3d

The matrix3d() function is an alternative to the three-dimensional 
transform functions 
rotate3d(), rotateX(), rotateY(), rotateZ(), 
translate3d(), translateZ(), 
scale3d(), scaleZ(), and perspective().

so you say
  .rotated {
    transform: matrix3d(0.583333, 0.186887, 0.79044, 0, 
    -0.52022, 0.833333, 0.186887, 0, 
    -0.623773, -0.52022, 0.583333, 0, 
    0, 0, 0, 1);
  }
  
  instead of the more intuitive
   .rotated {
    transform: rotate3d(1,-2,1,60deg);
  }
BUT
Any time you do a CSS transform, you're affecting the matrix. 
Even if you use another function such as rotate3d(), 
you're still affecting the matrix. 
The matrix determines the coordinates of the element 
— its position, size, orientation, etc. 
These are all represented by sixteen number values.

a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, d4 ... linear transformation.
a4, b4, c4 ...translation.

Another option is to use the Window.getComputedStyle() method to 
retrieve the computed value of the transform function.


 the matrix() function accepts 6 parameters FOR MERE two-dimensional space.