title: How to position a div on top of a rotated element?
body: <p>I need to exactly position a DIV (DIV.selector) on top of another div which has been rotate (DIV.target).</p>
  
  <p>In the following xample:
  <a href="http://jsfiddle.net/egjnd9bp/5/" rel="nofollow">http://jsfiddle.net/egjnd9bp/5/</a>
  please click 'rotate' and after 'create selector'.</p>
  
  <p>The desired result would be the yellow box (DIV.selector) which exact match( position and rotation) the cyan div (DIV.target)</p>
  
  <p>At the moment I am using getBoundingClientRect(), but I am not able to get the right x.y coordinates as <code>rect</code> include the boundary of the object rotated.</p>
  
  <p>Notes:
  A possible solution would be to remove the rotation, using getBoundingClientRect() and reapply the rotation after, but I am not sure if it is a proper solution, I would be glad to have a feedback, possibly on a more math/geometric solution instead.</p>
  
  <pre><code>&lt;div id="example" style="display: none;"&gt;&lt;/div&gt;
  &lt;div id="target"&gt;&lt;/div&gt;
  &lt;div id="trace"&gt;&lt;/div&gt;
  &lt;button id="btn-rotate" type="button"&gt;rotate&lt;/button&gt;
  &lt;button id="btn-coordinate" type="button"&gt;get coordinate x,y&lt;/button&gt;
  &lt;button id="btn-selector" type="button"&gt;create selector&lt;/button&gt;
  
  document.getElementById('btn-rotate').addEventListener('click', function (event) {
      document.getElementById('target').classList.add('rotation');
      document.getElementById('example').style.display = '';
  }.bind(this));
  
  document.getElementById('btn-coordinate').addEventListener('click', function (event) {
      alert(JSON.stringify(document.getElementById('target').getBoundingClientRect()));
  }.bind(this));
  
  document.getElementById('btn-selector').addEventListener('click', function (event) {
      var rect = document.getElementById('target').getBoundingClientRect();
      document.body.innerHTML += '&lt;div style="position:absolute; top:' + rect.top + 'px; left:' + rect.left + 'px; width:' + rect.width + 'px; height:' + rect.height + 'px; background:yellow; opacity:0.5;"&gt;&lt;/div&gt;';
  }.bind(this));
  
  #target {
      position:absolute;
      top:100px;
      left:100px;
      width:200px;
      height:200px;
      background-color: cyan;
      transform-origin: 50% 50% 0;
  }
  #trace {
      position:absolute;
      top:100px;
      left:100px;
      width:200px;
      height:200px;
      border: 1px solid gray;
      opacity: 0.1;
  }
  #example {
      position:absolute;
      top:100px;
      left:100px;
      width:5px;
      height:5px;
      background-color: red;
      z-index: 100;
  }
  .rotation {
      -ms-transform: rotate(10deg);
      -webkit-transform: rotate(10deg);
      transform: rotate(10deg);
  }
  </code></pre>