0
467
ViewsHow to get height and width of element when it is rotated
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>1 answers
Answer question0
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
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:
- If you have the hypotenuse, multiply it by sin(θ) to get the length of the side opposite to the angle.
- Alternatively, multiply the hypotenuse by cos(θ) to get the side adjacent to the angle.
- If you have the non-hypotenuse side adjacent to the angle, divide it by cos(θ) to get the length of the hypotenuse.
- Alternatively, multiply this length by tan(θ) to get the length of the side opposite to the angle.
- If you have an angle and the side opposite to it, you can divide the side length by sin(θ) to get the hypotenuse.
- Alternatively, divide the length by tan(θ) to get the length of the side adjacent to the angle.
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 checked the compatibility for different positions and it seems compatible with rotation from any point so far.
>>The element is rotated at an angle from anywhere.