title: Set height on div with CSS3 transform (rotate)
body: <p><strong>Goal</strong></p>
  
  <p>I'm working on a collapsible sidebar using jQuery for animation. I would like to have vertical text on the sidebar that acts as a label and can swap on the animateOut/animateIn effect. </p>
  
  <p>Normally I would use an image of the text that I've simply swapped vertically, and switch it out on animation, but with CSS3 transforms I'd like to get it to work instead.</p>
  
  <p><strong>Problem</strong></p>
  
  <p>The problem I'm facing is that setting the height on my rotated container makes it expand horizontally (as it's rotated 90deg) so that doesn't work. I then tried to set the width (hoping it would expand vertically, acting as height), but that has an odd effect of causing the width of my parent container to expand as well.</p>
  
  <p><strong>Fix?</strong></p>
  
  <p><em>How can I set the height on a rotated (transformed) element without affecting the width of the parent container? So far I have been unable to do this.</em></p>
  
  <p><strong>Live Example</strong></p>
  
  <p>Here's a fiddle that demonstrates my problem: <a href="http://jsfiddle.net/8mnRF/2/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <p>The <code>collapse-pane</code> class is what I have rotated and contains the span I have my text inside. You'll notice it has a width set, that widens the border, but also affects the parent container.</p>
  
  <p>The code:</p>
  
  <p>CSS:</p>
  
  <pre><code>.right-panel{
      position:fixed;
      right:0;
      top:0;
      bottom:0;
      border:1px solid #ccc;
      background-color:#efefef;
  }
  .collapse-pane{
      margin-top:50px;
      width:30px;
      border:1px solid #999;
      cursor:pointer;
      /* Safari */
      -webkit-transform: rotate(-90deg);
      /* Firefox */
      -moz-transform: rotate(-90deg);
      /* IE */
      -ms-transform: rotate(-90deg);
      /* Opera */
      -o-transform: rotate(-90deg);
      /* Internet Explorer */
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);   
  }
  .collapse-pane span{
      padding:5px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="right-panel"&gt;
      &lt;div class="collapse-pane"&gt;
          &lt;span class="expand"&gt;Expand&lt;/span&gt;
      &lt;/div&gt;
      &lt;div style="width:0;" class="panel-body"&gt;
          &lt;div style="display:none;" class="panel-body-inner"&gt;
              adsfasdfasdf
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's an image also showing the problem, so you don't have to view the Fiddle.</p>
  
  <p><img src="https://i.stack.imgur.com/bBVF4.png" alt="Weird div spacing"></p>
  
  <p><strong>Update</strong></p>
  
  <p>I've made the problem statement a little clearer, as my original post was confusing the issues.</p>
  
  <p>Thanks for any help!</p>