How can I correctly snap a CSS-rotated image to an 80px grid using JavaScript?

I have a 9x6 grid made up of 80px squares.

HTMLCopied
<div class = "grid" style="width: 720px; height:480px; margin: auto; background-color: white;">

CSSCopied
<style>
    .grid {
        background-image:
            repeating-linear-gradient(#ccc 0 1px, transparent 1px 100%),
            repeating-linear-gradient(90deg, #ccc 0 1px, transparent 1px 100%);
        background-size: 80px 80px;
        outline: 10px solid black;
    }
</style>

I also have an image (160px wide by 80px tall) defined as:

HTMLCopied
<img class="movable" src="stick.png" id="Stick" style="left: 256.5px; top: 168px;">

The image can be dragged and dropped onto the grid, and it snaps perfectly when unrotated. However, after applying a CSS rotation, the snap becomes inaccurate (off by 40px in both directions for this image).

My investigation revealed that even when using a parent container, the image’s rotation does not change its original transform-origin, so targ.style.left and targ.getBoundingClientRect().left differ significantly. This discrepancy worsens with larger images:

• A 160px x 80px image is off by (40, -40)
• An 80px x 240px image is off by (-80, 40)
• An 80px x 400px image is off by (-160, 160)

Here is the JavaScript code I’m using:

JAVASCRIPTCopied
function startDrag(e) {
    // determine event object
    if (!e) {
        var e = window.event;
    }

    if(e.preventDefault) e.preventDefault();

    // IE uses srcElement, others use target
    targ = e.target ? e.target : e.srcElement;

    if (targ.className != 'movable') {return};

    // calculate event X, Y coordinates
        offsetX = e.clientX;
        offsetY = e.clientY;

    // assign default values for top and left properties
    if(!targ.style.left) { targ.style.left=offsetX-(e.target.getBoundingClientRect().width/2)};
    if (!targ.style.top) { targ.style.top=offsetY-(e.target.getBoundingClientRect().height/2)};

    // calculate integer values for top and left 
    // properties
    coordX = parseInt(targ.style.left);
    coordY = parseInt(targ.style.top);
    drag = true;

    // move div element
        document.onmousemove=dragDiv;
    return false;
}

function dragDiv(e) {
    if (!drag) {return};
    if (!e) { var e= window.event};
    // move div element
    targ.style.left=coordX+e.clientX-offsetX+'px';
    targ.style.top=coordY+e.clientY-offsetY+'px';
    return false;
}

function stopDrag() {
    drag=false;
    let grid_offset = grid.getBoundingClientRect();
    let item_offset = targ.getBoundingClientRect();

    let xa = Math.abs(grid_offset.left - (80*Math.floor(parseInt(grid_offset.left)/80)));
    let ya = Math.abs(grid_offset.top - (80*Math.floor(parseInt(grid_offset.top)/80)));
    
    let snap = {
        x: 80*Math.round((item_offset.left - xa)/80),
        y: 80*Math.round((item_offset.top - ya)/80)
    }
    
    targ.style.left = snap.x + xa;
    targ.style.top = snap.y + ya;
}

function rotate_item (e) {
    e.preventDefault();
    if (!e.target.classList.contains("movable")) return;
    if (!e.target.style.rotate) e.target.style.rotate = "0deg";
    let deg = e.target.style.rotate.slice(0,-3);
    if (e.deltaY < 0) {
        deg = parseInt(deg) + 90;
        e.target.style.rotate = deg + "deg";
    } else {
        deg = parseInt(deg) - 90;
        e.target.style.rotate = deg + "deg";
    }
}

I’m considering a couple of solutions:

• Writing a lengthy switch case for different image sizes and orientations.
• Adjusting for the difference between targ.style.left and targ.getBoundingClientRect().left.

However, I’d like a more elegant solution and to better understand why this offset occurs. What am I doing wrong, and what is the proper way to snap a rotated image to a grid?