title: CSS use transform-origin to position a rotated element
body: <p>I can't work out how to rotate an element so that it sits underneath another one. The image below should illustrate the intended result.</p>
  
  <p><a href="https://i.stack.imgur.com/WQU8A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WQU8A.png" alt="enter image description here"></a></p>
  
  <p>Here is what I have tried so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.div1 {
    height: 120px;
    width: 120px;
    float: left;
    margin: 20px;
    border: solid 1px #000;
    overflow: hidden;
  }
  .div1 button {
    width: 48px;
    height: 48px;
    border: 0;
    margin: 0;
    padding: 0;
  }
  .div2 {
    background-color: #999;
    height: 48px;
    line-height: 48px;
    box-sizing: border-box;
  }
  .originFromLeft .div2 {
    transform: rotate(90deg);
    transform-origin: 24px 24px;
    padding-left: 12px;
    text-align: left;
  }
  .div1.originFromRight {
    overflow: visible;
  }
  .originFromRight .div2 {
    padding-right: 12px;
    text-align: right;
    transform: rotate(-90deg);
    transform-origin: right top;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="div1"&gt;
    &lt;button&gt;&gt;&lt;/button&gt;
    &lt;div class="div2"&gt;HELLO&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="div1 originFromLeft"&gt;
    &lt;button&gt;&gt;&lt;/button&gt;
    &lt;div class="div2"&gt;HELLO&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="div1 originFromRight"&gt;
    &lt;button&gt;&gt;&lt;/button&gt;
    &lt;div class="div2"&gt;HELLO&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The second example basically does what I want but the text is orientated the wrong way.</p>
  
  <p>The closest I can get is example 3 but I need to pull this back to the left. I've tried <code>translate</code> but I can't get it to work, I've tried a negative right <code>margin</code> of 100% which almost works but basically doesn't.</p>