JSFiddle - React, Tailwind, and code Playground

HTML

<div id='rot'>
    <div id='x'></div>
    <div id='y'></div>
    <div id='ins'></div>
</div>
<div id='title'>Crossbrowser (IE also!) position inside after rotation and translation.<br>Move your mouse over the grey area. The yellow div is inside the grey div.</div>

CSS

html, body
{
    margin: 0;
    padding: 0;
}
div {
    margin: 0;
    padding: 0;
    border: 0;
    position: absolute;
}
#rot {
    width: 100px;
    height: 100px;
    overflow: hidden;
    background-color:#ccc;
    -webkit-transform: rotate(10deg);
}
#ins {
    width: 15px;
    height: 15px;
    background-color:#ff0;
}
#x {
    width: 50px;
    left: 50px;
    top: 50px;
    height: 2px;
    background-color:#f00;
}
#y {
    height: 50px;
    width: 2px;
    left: 50px;
    top: 50px;
    background-color:#0f0;
}

JavaScript

$(document).ready(init);

var rotation = 0;
var mid_point = {};
var scale = {};
var counter=0;

function init() {
    window.setInterval(animationLoop, 40);
    mid_point.x = 50;
    mid_point.y = 50;
    scale.off_x = $("#rot").width()/2;
    scale.off_y = $("#rot").height()/2;
    $("#title").css({
        left: "120px",
        width: "300px",
        top: "0px"
    }).mousemove(moveMouse);
    $("#rot").css({
        left: mid_point.x+"px",
        top: mid_point.y+"px"
    }).mousemove(moveMouse);
}

function moveMouse(e) {
    var relX = e.pageX - scale.off_x - mid_point.x;
    var relY = e.pageY - scale.off_y - mid_point.y;
    var rad = rotation / 180 * Math.PI;
    var xax = Math.cos(rad);
    var xay = -Math.sin(rad);
    var yax = -xay;
    var yay = xax;
    var px = -7+ 50 + relX * xax + relY * yax;
    var py = -7+ 50 + relX * xay + relY * yay;
    $("#ins").css({
        left: px + "px",
        top: py + "px"
    });

}

function animationLoop() {
    counter++;
    mid_point.x=Math.sin(counter/30)*100+200;
    mid_point.y=Math.cos(counter/30)*50+75;

    $("#rot").css({
        left: mid_point.x + "px",
        top: mid_point.y + "px"
    });
    $("#rot").css("-webkit-transform", "rotate(" + rotation + "deg)")
    .css("-ms-transform", "rotate(" + rotation + "deg)")
    .css("moz-transform", "rotate(" + rotation + "deg)")
    .css("-o-transform", "rotate(" + rotation + "deg)")
    .css("transform", "rotate(" + rotation + "deg)");
    rotation++;
}