When using e.getBoundingClientRect().left, the position of an element from the left side of the screen can be obtained.
However, when trying to determine the position of end points on a rotated element, adding width or height may not suffice. So, how can the position of end points be determined in such cases?
Is obtaining these values even possible?
https://i.sstatic.net/rvHGR.png
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("The correct calculation method for box2 is uncertain: Is it box2.getBoundingClientRect().left + 100, box2.getBoundingClientRect().left + 20, or perhaps neither?");
}
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>