title: CSS transformed object position fix
body: <p>It was hard to explain with words, so I tried to explain with graphics.</p>
  
  <p>There is a div here with its style.</p>
  
  <p><img src="https://i.stack.imgur.com/RYt8v.png" alt="enter image description here"></p>
  
  <p>Now if I change its width with 400px here...</p>
  
  <p><img src="https://i.stack.imgur.com/GYybs.png" alt="enter image description here"></p>
  
  <p>because of it is a transformed (rotated) object, something happens and "TOP-LEFT" corner of it, moves down.</p>
  
  <p>Now I want to keep its "TOP-LEFT" position fixed. But I couldnt find a correct correlation to fix it. I guess I need a trigonometric formula using rotation angle.</p>
  
  <p>Also I know it is related with '<code>scale</code>' and '<code>transform-origin</code>' and can be easily done with them but I dont want to use any other transformation parameters. Especialy '<code>transform-origin</code>' because of lack of browser support.</p>
  
  <p>Does anybody here who can help me with the correlation which will be used in JavaScript to fix its corner. Maybe <code>getBoundingClientRect()</code> can be used for this.</p>
  
  <p>Here is the <a href="http://jsfiddle.net/y343Z/" rel="nofollow noreferrer">FIDDLE</a></p>
  
  <p>Thank you.</p>