title: Moving image with cursor (parent being transform/css rotated)
body: <p>Experts,</p>
  
  <p>I created an image(#hand) movement along with mouse cursor (when being inside a div). This part is working fine unless when there is a transform rotate to #handWrap div. The hand image position moves different on a rotated parent div. I know, we should do some sort of calculation before passing the e.pageX and e.pageY position directly to hand, but couldn't find a proper fix. Would appreciate if anyone could help.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="handWrap"&gt;
      &lt;img id="hand" src="http://s30.postimg.org/s4f5oy9dd/hand.png"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>* { margin:0; padding:0; }
  #handWrap {
      position:absolute;
      top:40px;
      left: 80px;
      width:200px;
      height:300px;
      overflow:hidden;
      border:1px solid red;
      /* try uncommenting below, hand position not being accurate */
      /* transform: rotate(-10deg); */
      cursor:pointer;
  }
  #hand{
      position: absolute;
      transform: rotate(10deg);
  }
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$("#handWrap").on("mousemove",function(e){
      // I played with sin/cos/half-width etc, but doesn't worked
      $('#hand').css({'left':e.pageX-130,'top':e.pageY-44});
  });
  </code></pre>
  
  <p><strong>JSfiddle demo here:</strong>
  In jsfiddle, try uncommenting the transform rotate in #handWrap, then run, we could see hand movement is not accurate with mouse cursor</p>
  
  <p><a href="http://jsfiddle.net/y4pfd7u2/4/" rel="nofollow">http://jsfiddle.net/y4pfd7u2/4/</a></p>
  
  <p>Thanks in advance!</p>