CODEWITHSUNDEEP
javascriptjqueryhtmlpositionphysics
Sarath Babu Nuthimadugu
Sarath Babu Nuthimadugu

Reputation: 881

Rotated div offset top position from based on left position

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

enter image description here

Upvotes: 0

Views: 457

Answers (1)

zessx
zessx

Reputation: 68818

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:

enter image description here

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);

Upvotes: 1

Related Questions