JSFiddle - React, Tailwind, and code Playground

HTML

<div style="background: silver; border: 3px dotted red; width: 90%; height: 100%; display: grid; justify-items: center; align-items: center;">
    <div id="test" style="position: relative; width:1000px; height: 100px; background-color: yellow; border: 3px solid black; transform: rotate(0deg); display: grid; justify-items: center; align-items: center; grid-auto-flow: column;">
        <div>A</div>
        <div>B</div>
        <div>C</div>
    </div>
</div>

JavaScript

$('#test').on('click', (event) => {
    const ELEMENT_X = event.pageX - $(event.currentTarget).offset().left - 100;
    const ELEMENT_Y = event.pageY - $(event.currentTarget).offset().top - 0;
alert(1);
    $(event.currentTarget).css('transform-origin', ELEMENT_X + 'px ' + ELEMENT_Y + 'px');
    
    degrees += 10;
    event.currentTarget.style.transform = 'rotate(' + degrees + 'deg)';

});