From square coordinates to CSS matrix3d()

Question

I'm stuck on a problem :

Let's consider a square on a surface that is moving (in a video) . So remember it's not always a plane surface, it can be skewed, rotated, etc.

Right now, I'm detecting it with Aruco JS and getting the coordinates (x,y) of its 4 corners . I'm pretty sure that, starting with this coordinates, I can render the transformation using transform: matrix3d(); .

The thing is : I have about 0 knowledge in maths stuff and especially trigonometry. And I really would learn / understand that.

To sum up : With the coordinates of the corners of a square in real time, how can I apply the transformation to another element using CSS transform property ?

Here's some things I've done so far (this code is executed inside a window.requestAnimationFrame) :

  console.log('rotation : ', rotation[0], rotation[1], rotation[2]);
  console.log('translation : ', translation);
  var dimensions = {
    width: lineDistance(corners[0], corners[1]),
    height: lineDistance(corners[0], corners[3])
  }, center = {
    x: corners[0].x + (corners[1].x - corners[0].x)/2,
    y: corners[0].y + (corners[3].y - corners[0].y)/2
  }, rotateAngle = angle(corners[0].x, corners[0].y, corners[1].x, corners[1].y),
    rotateXangle = parseInt(rotation[1][2]);

    img.style.top = corners[0].y;
    img.style.left = corners[0].x;

  img.style.width = dimensions.width;
  img.style.height = dimensions.height;
  img.style.transform = 'rotate('+rotateAngle+'deg) rotateX('+Math.asin(-rotateXangle)+'deg) rotateY('+-Math.atan2(rotation[0][2], rotation[2][2])+'deg) rotateZ('+Math.atan2(rotation[1][0], rotation[1][1])+'deg)';

Answer 1

The core of this question has been asked on Math Stack Exchange, titled Finding the Transform matrix from 4 projected points (with Javascript) . My answer there should serve your needs as well. Plus the better math type setting there will make things easier to read.