Calculating Matrix Transformations

by wamosjk

HTML

<div class="start">Before</div>
<div class="end">After</div>

CSS

.start,
.end{
  width: 100px;
  height: 100px;
  background: green;
  position:absolute;
  top:20px;
  left: 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: white;
}

.end{
  transform: matrix3d(-0.766044, 0.3213944796000002, 0, 0, -0.642788, -1.6884294108, 0, 0, 0, 0, 1, 0, 100, 200, 0, 1)
}

JavaScript

const startEl = document.querySelector('.start');
const endEl = document.querySelector('.end');
const startRect = startEl.getBoundingClientRect();
const endRect = endEl.getBoundingClientRect();

const matrix = [-0.766044, 0.3213944796000002, 0, 0, -0.642788, -1.6884294108, 0, 0, 0, 0, 1, 0, 100, 200, 0, 1];


// The logged rect below would be the value I need to get
// but I need it before the transformation happens.
// So you can pretend the end element isn't even there
// it is just to confirm the end rect of the transform.
console.log('endRect', endRect);