How to determine the right value for top and left property depending on rotation?

Question

In the following code if you change. wrapper class rotateY value (which is responsible for rotating cube on Y axis) to say -30 deg, then to perfectly align the second cube in relation to first one ,you would need to set new values for top and left property of second cube so there is no visible distance at sides or between cubes.

That left and top property of second cube can be changed from Javascript code.

So my question is what formula( if one is possible )should I use to let the program decide new top and left property value depending on the value of rotation. Ty!

https://code.sololearn.com/WqvbmFu87Ssh/?ref=app

Answer 1

If you want to position something in 3d, why not apply that transformation in 3d instead of 2d (setting top and left)?

To position the new cube relative to the other cube, first position it on top of the other cube by making their top and left the same, then grab its transform which is composed of both translation and rotation:

wrapper = node.getElementsByClassName('wrapper')[0]
transform = getComputedStyle(wrapper).getPropertyValue('transform')
matrix = new WebKitCSSMatrix(transform)

"matrix" is a matrix transform object that we can use to move the cube relatively by the length of the cube to put it side by side. Let matrix multiplication do the work for you:

fixed_pix = getComputedStyle(document).getPropertyValue('--fixed_pix')
cubeLength = parseInt(fixed_pix) * 2
matrix.translateSelf(0, 0, cubeLength) // "moves the cube"
wrapper.style.transform = matrix

If you for whatever reason need to use top and left, you can. Again, grab the transform, but this time of the original cube ("contain"), and translate the cube again:

wrapper = contain.getElementsByClassName('wrapper')[0]
transform = getComputedStyle(wrapper).getPropertyValue('transform')
matrix = new WebKitCSSMatrix(transform)
matrix.translateSelf(0, 0, cubeLength)

You can then get the X and Y coordinates of the new matrix and ignore the rest because depth doesn't matter in 2D:

x = matrix.m41
y = matrix.m42

These coordinates are only an offset from the original cube. To get the final coordinates, add them to the position of the original cube:

positionLeft = contain.offsetLeft + x
positionTop = contain.offsetTop + y
...
'top': positionTop + 'px',
'left': positionLeft + 'px',

If you alert these numbers (134.67912, 156.42788) you will get something close to what you already have (134.5, 157). But it isn't perfect because you are using perspective projection and that's why you should go for the first option. I hope this answers your question.

Answer 2

jtrh I will have to go through your answer later on to understand this matrix thing again but what you said really makes sense ,like why was I even using left and right to position it when there is translate thing !

Thank you so much ☺️