Увеличение высоты div перемещает его вниз и наоборот ⇐ CSS

[Anonymous]

Итак, я экспериментировал с JS и математикой. Я хотел создать оси X, Y и линию, которая вращается в соответствии с положением мыши, и я хотел, чтобы она увеличивала свою высоту в соответствии с расстоянием от моего начала координат или центр оси... теперь, когда я пытаюсь увеличить высоту div... он перемещается вниз, и всякий раз, когда я пытаюсь уменьшить его высоту, он идет вверх... как я могу это исправить??

Код: Выделить всё

let x = document.body.clientWidth / 2;
let y = ( document.body.clientHeight || document.documentElement.clientHeight ) / 2;

let ang = document.querySelector(".angle");

document.addEventListener("mousemove",(e)=>{
let thetaRadians = Math.atan2(e.clientY - y, e.clientX - x);
let thetaDegrees = thetaRadians * (180 / Math.PI);
ang.style.rotate = `${thetaDegrees + 90}deg`;

const distance = Math.floor(Math.sqrt(Math.pow((e.clientX - x),2) + Math.pow((e.clientY - y),2)));
ang.style.height = `${distance}px`;
});

Код: Выделить всё

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, body {
height: 100%;
width: 100%;
}

body {
display: flex;
align-items: center;
justify-content: center;
}

.line {
height: 75%;
width: 2px;
background: #000;
position: absolute;
}

.line::before {
content: '';
position: absolute;
height: 100%;
width: 100%;
background: #000;
rotate: 90deg;
}

.angle {
height: 190px;
rotate: 45deg;
transform-origin: bottom;
width: 2px;
background: red;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/790 ... vice-versa