title: Move center of rotated element to cursor
body: <p>I want to move an element with the cursor while kipping the center of the element at the cursor position, I know how to do it but the problem starts when the element is rotated.<br />
  Here are the snippets:</p>
  <p>Not rotated:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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';
  
    }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#el{
    background: red;
    height:100px;
    width:100px;
    text-align:center;
    font-size:1.2em;
    position:absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="el"&gt;not rotated works fine&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Rotated:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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';
  
    }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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) ;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="el"&gt;rotated, doesn't work&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any idea to do it easily and nicely?
  Thanks In Advance.</p>
  <p><strong>Edit:</strong> <br />
  I need the <code>transform-origin</code> for animation so changing <code>transform-origin</code> to 0 is not enough, I need also to animate the location.
  Is there any tool to convert this transformation:</p>
  <pre><code>transform-origin: 0% 100%;
  transform: rotateZ(-55deg) rotateY(55deg) rotateX(-25deg) ;
  </code></pre>
  <p>into this pattern :</p>
  <pre><code>transform-origin: center;
  transform: rotateZ() rotateY() rotateX() translateX() translateY() translateZ();
  </code></pre>