如何获得具有透视图的旋转图像的坐标？

Question

我有一个旋转的图像，我想获取旋转的4个角的坐标，我需要用它来检查碰撞。我画了一个正方形，以显示我使用图像元素的左/上/宽/高得到的结果。

我找到了该线程，但是不确定xm和ym是什么：Get new x,y coordinates of a point in a rotated image

我也尝试遵循此示例，但是即使将图片替换为div并添加虚拟div，我最终也得到了相同的正方形：Get actual pixel coordinates of div after CSS3 transform

我认为我的问题可能是我使用透视图。在下面，您可以看到到目前为止我能得到的最好的照片（黑色边框）。

我有以下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) }
}

*****************编辑：

使用get 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);

编辑凹凸