title: css3 rotate top and left co-ordinates
body: <p>I have a 2 divs - parent and a child. Child is <code>position:absolute</code></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="parent"&gt;
      &lt;div id="child"&gt;
          some text
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#parent {position:relative; border:1px solid #000; width:200px; height:100px}
  #child {position:absolute; top:0; left:0; background-color:maroon; opacity:0.5; width:150px; height:50px; border:1px solid #000}
  </code></pre>
  
  <p>I have added few more elements in the jsfiddle to enable changing top and left co-ordinates.<br>
  <a href="http://jsfiddle.net/zgvEC/1/" rel="nofollow">http://jsfiddle.net/zgvEC/1/</a></p>
  
  <p>The problems I am facing is -</p>
  
  <ol>
  <li><p>When child div is rotated 90 or 270 degree then the element is not positioned to the top-left corner of parent div. The width/height of child div could be any. If the width of the child div could be accommodated in the height of the parent then there is no problem of top and left position. I am ready to do maths here but have no idea what to consider.</p></li>
  <li><p>When I drag child div, its position is changed to the top right corner.</p></li>
  </ol>
  
  <p>Please let me know if there is any help. Thank you a lot !!</p>