旋转时如何获取元素的高度和宽度

Question

As I can get position of element from left side of screen using e.getBoundingClientRect().left

When we want to get the position of end points then add width or height according to need but how to get the position of end points when element is rotated.

Is it possible to get values

 let getBoxPos = document.querySelectorAll(".demo") let box1 = document.querySelector("#box1") let box2 = document.querySelector("#box2") let box3 = document.querySelector("#box3") let s = ""; function func() { getBoxPos.forEach(e => { let figXValue = e.getBoundingClientRect().left; s = Number(s) + Number(1); console.log("Start distance for box" + s + ":" + figXValue) }) console.log("End distance for box1:" + (box1.getBoundingClientRect().left + 24)); console.log("End distance for box3:" + (box3.getBoundingClientRect().left + 104)); console.log("Don't know the correct way for box2:Is it box2.getBoundingClientRect().left + 100 or box2.getBoundingClientRect().left + 20 or none of them "); } func();

 .demo { height: 100px; width: 20px; margin-left: 40px; border: 2px solid black; } .demo:nth-child(2) { border: 2px solid red; transform: rotate(-45deg); } .demo:nth-child(3) { border: 2px solid green; transform: rotate(-90deg); }

 <div class="demo" id="box1"></div> <div class="demo" id="box2"></div> <div class="demo" id="box3"></div>

Thanks for help in advance

Answer 1

What we know: Height , width of element and the angle θ because elements has animation or element is transformed(rotated)

What we don't know or need to find: New width and height of element after rotation

The answer lies in math's

If we know a angle & a side(height, width in this case) of right angle triangle than we can find other sides too.

To solve a triangle with one side, you also need one of the non-right angled angles. If not, it is impossible:

1. If you have the hypotenuse, multiply it by sin(θ) to get the length of the side opposite to the angle.
2. Alternatively, multiply the hypotenuse by cos(θ) to get the side adjacent to the angle.
3. If you have the non-hypotenuse side adjacent to the angle, divide it by cos(θ) to get the length of the hypotenuse.
4. Alternatively, multiply this length by tan(θ) to get the length of the side opposite to the angle.
5. If you have an angle and the side opposite to it, you can divide the side length by sin(θ) to get the hypotenuse.
6. Alternatively, divide the length by tan(θ) to get the length of the side adjacent to the angle.

Taken from OMNI Calculator

Only single angle is given but other are found using angle formulas and relations.

Now as the question asks: How to get position of blue point than we have to add this to left value

Height*Sinθ + Width*Cosθ

---

The final code becomes:

box2.getBoundingClientRect().left + Height*Sinθ + Width*Cosθ

You must include border too if any in height and width, if wanted from border edge

As A Haworth pointed out rotation can be from any point, so not checked the compatibility for every positions but till now it is compatible with rotation within the element. So use with precaution