Как получить координаты повернутого изображения с перспективой?

У меня есть вращающееся изображение, и я хотел бы получить координаты повернутых 4 углов, мне это нужно для проверки столкновений. Я нарисовал квадрат, чтобы показать, что я получаю, используя левую/верхнюю/ширину/высоту элемента изображения.

Я нашел этот поток, но я не уверен, что такое xm и ym: Получить новые координаты x,y точки на повернутом изображении

Я также пытался следовать этому примеру, но даже заменив изображение на div и добавив фиктивные div, я получил тот же квадрат: Получить фактические пиксельные координаты div после преобразования CSS3

Я думаю, что моя проблема может заключаться в том, что я использую перспективу. Ниже вы можете увидеть изображение лучшего, что я смог сделать (черная рамка).

У меня есть следующий css:

.card {
    position: absolute;
    top: 100px;
    left: 500px;
    width: 20%;

    border: 2px solid white;
}

.card-rotate {
    animation: card-rotate;

    animation-duration: 1500ms;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

@keyframes card-rotate {
    0% { transform: perspective(400px) rotateY(-55deg) }
    100% { transform: perspective(400px) rotateY(-75deg) }
}

***************** РЕДАКТИРОВАТЬ:

после использования getClientRects() я стал ближе, но все еще не совсем то, что мне нужно:

    let card = document.querySelector(".card");
    console.log(card.getClientRects());

    // I relized that most of the following variables are useless, sorry for the confusion they were there for another attempt I made

    let nwx = card.getClientRects()[0].left;
    let nwy = card.getClientRects()[0].top;
    let nex = card.getClientRects()[0].right;
    let ney = card.getClientRects()[0].top;
    let sex = card.getClientRects()[0].right; // also I got to name a variable sex, which is kind of cool
    let sey = card.getClientRects()[0].bottom;
    let swx = card.getClientRects()[0].left;
    let swy = card.getClientRects()[0].bottom;

    let path = document.getElementById("cardArea");

    let pathString = "M" + nwx + " " + nwy;
    pathString += " L" + nex + " " + ney;
    pathString += " L" + sex + " " + sey;
    pathString += " L" + swx + " " + swy;
    pathString += " L" + nwx + " " + nwy;

    path.setAttributeNS(null, "d", pathString);

Редактирование для удара