How to get the coordinates of a rotated image with perspective?

Question

I have a rotating image and I'd like to get the coordinates of the rotated 4 corners, I need this to check collisions. I have drawn a square to show what I get using left / top / width / height of the image element.

I found this thread but I'm not sure what are xm and ym: Get new x,y coordinates of a point in a rotated image

I also tried to follow this example but even replacing the picture with a div and adding the dummy divs I end up with the same square: Get actual pixel coordinates of div after CSS3 transform

I think that my problem might be that I'm using perspective. Below you can see the picture of the best I could get so far (black border).

I have the following 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) }
}

***************** EDIT:

after using get getClientRects() I got closer, but still no quite what I need:

    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);

Editing for a bump