Rotated div offset top position from based on left position

Question

I am struggling to find offset top position from left. For example left 50px i want find top position based on left.

Answer 1

This is a pure euclidean geometry problem, but you currently can't calculate this offset. You need one of these data:

• the rotation angle
• the distance between the (left-)end of the line and your point

I guess you know the rotation, so we'll use this value. Let's say you've made a 30° rotation, we've got this:

Using Pythagore's theorem, we've got:

    tan(30) = H / 50px
<=> H = tan(30) * 50px
<=> H = 28.867px

So, take your angle (ɑ), and apply this formula:

H = tan(ɑ) * 50px

In Javascript:

var offset = {
    x: 50,
    y: null
}
var alpha = 30;
offset.y = Math.tan(alpha * (180 / Math.PI)) * offset.x;

console.log(offset);