2

So i am trying to make a scroll function that uses matrix3d to transform elements on scroll. I am running into an issue trying to calculate the final position of the element after the transformation happens.

I need to know how much added height the transformation will cause.

Right now I am just multiplying the 1 and 5 values of the css matrix3d by the element height then dividing by 2 and adding the 13 value of the matrix. Like so:

let a = Math.abs((matrix[1] * rect.height) / 2);
let b = Math.abs(((matrix[5] - 1) * rect.height) / 2);
const c = matrix[13];
return a + b + c;

This works for everything except for rotation and this also seems really hacky to me.

The question I have is given I have the ending matrix value and the initial element bounding rect is there a way to calculate the ending bounding rect of the element caused by the matrix transformation being added to the element.

Here is a fiddle that visually demonstrates a little better what I am asking Fiddle

So say I have the following matrix which will skewY: 40deg, scaley:1.5, translateY: 300, translateX: 200, and rotateZ: 140deg.

[-0.766044, 0.321394, 0, 0, -0.642788, -1.688429, 0, 0, 0, 0, 1, 0, 200, 300, 0, 1]

and an element that has a starting position rect of:

x: 100
y: 600
width: 100
height: 100
top: 600
right: 120
bottom: 700
left: 100

How could I tell where the element will end up after the following transformation is added matrix3d(-1, -0.8391, 0, 0, 0, -1.5, 0, 0, 0, 0, 1, 0, 200, 300, 0, 1)

Any help would be much appreciated.

user3331344
  • 728
  • 8
  • 23
  • Take a look at this answer: https://stackoverflow.com/questions/622140/calculate-bounding-box-coordinates-from-a-rotated-rectangle – evolon Feb 07 '20 at 22:22
  • Is this method viable: `getBoundingClientRect` before transformation, transform, `getBoundingClientRect` after said transformation, and transform it back to its original state? – Richard Feb 08 '20 at 08:14
  • @Richard It is a viable method I'm just not too sure about performance. We are using transforms so it shouldn't mess with the page too much but I don't have anything to compare performance against because I can't figure out how to calculate the ending matrix otherwise to compare it with. – user3331344 Feb 08 '20 at 17:41
  • usual way for this is to have [OBB](https://stackoverflow.com/a/42997918/2521214) of your objects or whatever then you simply transform just the OBB (4 points) and have the result exactly and fast ... – Spektre Feb 08 '20 at 17:56

0 Answers0