将旋转元素的中心移动到光标

Question

我想用光标移动一个元素，同时在光标位置跳过元素的中心，我知道该怎么做，但是当元素旋转时问题就开始了。
这是sn-ps：

未旋转：

var offset = [0,0];
var el;

document.addEventListener("DOMContentLoaded", function(event) {
     el = document.getElementById("el");

     offset = [
        parseInt(getComputedStyle(el).getPropertyValue("width"))/2,
        parseInt(getComputedStyle(el).getPropertyValue("height"))/2
    ];

    document.addEventListener('mousemove',fun,false);
        
});

function fun(event) { 
    mousePosition = {

        x : event.clientX,
        y : event.clientY

    };

    el.style.left = (mousePosition.x - offset[0]) + 'px';
    el.style.top  = (mousePosition.y - offset[1]) + 'px';

  }

#el{
  background: red;
  height:100px;
  width:100px;
  text-align:center;
  font-size:1.2em;
  position:absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="el">not rotated works fine</div>

旋转：

var offset = [0,0];
var el;

document.addEventListener("DOMContentLoaded", function(event) {
     el = document.getElementById("el");

     offset = [
        parseInt(getComputedStyle(el).getPropertyValue("width"))/2,
        parseInt(getComputedStyle(el).getPropertyValue("height"))/2
    ];

    document.addEventListener('mousemove',fun,false);
        
});

function fun(event) { 
    mousePosition = {

        x : event.clientX,
        y : event.clientY

    };

    el.style.left = (mousePosition.x - offset[0]) + 'px';
    el.style.top  = (mousePosition.y - offset[1]) + 'px';

  }

#el{
  background: red;
  height:100px;
  width:100px;
  text-align:center;
  font-size:1.2em;
  position:absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: 0% 100%;
  transform: rotateZ(-55deg) rotateY(55deg) rotateX(-25deg) ;
}

<div id="el">rotated, doesn't work</div>

有什么想法可以轻松又漂亮地做到这一点吗？ 提前致谢。

编辑：
我需要 transform-origin 用于动画，因此将 transform-origin 更改为 0 是不够的，我还需要为位置设置动画。 是否有任何工具可以转换这种转换：

transform-origin: 0% 100%;
transform: rotateZ(-55deg) rotateY(55deg) rotateX(-25deg) ;

进入这个模式：

transform-origin: center;
transform: rotateZ() rotateY() rotateX() translateX() translateY() translateZ();

Answer 1

改变样式如下。

#el{
  background: red;
  height:100px;
  width:100px;
  text-align:center;
  font-size:1.2em;
  position:absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: center;      /* This is changed :) */
  transform: rotateZ(-55deg) rotateY(55deg) rotateX(-25deg) ;
}