title: How to preserve the bottom-right position when changing the height of a rotated dom element?
body: <p>As demonstrated <a href="http://jsfiddle.net/g8my3v6d/1/" rel="nofollow noreferrer">here</a>. When changing the width/height of an element that is rotated by some angle. The element moves.</p>
  
  <p>How is it possible to fix and preserve the position of the element at the bottom right or any other corner for that matter when the width or height of the element is changed. And without changing the transform origin.</p>
  
  <p>CSS:</p>
  
  <pre><code>.test{
    position: absolute;
    top: 200px;
    left: 200px;
  
    width: 400px;
    height: 200px;
    background: red;
  
    transform: rotate(120deg);
  }
  </code></pre>