title: convert horizontal tabs to vertical (HTML & CSS only, no js)
body: <p>I'm trying to create a basic portal with tabs on the left, rather than on top. Ideally, I would like to accomplish this without any javascript; with HTML5 &amp; CSS3 only.</p>
  
  <p>I've been playing with the following code for horizontal tabs: <a href="http://jsfiddle.net/Juggler/9Ue9j/2/">http://jsfiddle.net/Juggler/9Ue9j/2/</a></p>
  
  <pre><code>&lt;div id="page-wrap"&gt;
      &lt;div class="tabs"&gt;
          &lt;div class="tab"&gt;
              &lt;input type="radio" id="tab-1" name="tab-group-1" checked&gt;
              &lt;label for="tab-1"&gt;Tab One&lt;/label&gt;
              &lt;div class="content"&gt;
                  &lt;p&gt;Stuff for Tab One&lt;/p&gt;
              &lt;/div&gt; 
          &lt;/div&gt;
          &lt;div class="tab"&gt;
              &lt;input type="radio" id="tab-2" name="tab-group-1"&gt;
              &lt;label for="tab-2"&gt;Tab Two&lt;/label&gt;
              &lt;div class="content"&gt;
                  &lt;p&gt;Stuff for Tab Two&lt;/p&gt;
              &lt;/div&gt; 
          &lt;/div&gt;
          &lt;div class="tab"&gt;
              &lt;input type="radio" id="tab-3" name="tab-group-1"&gt;
              &lt;label for="tab-3"&gt;Tab Three&lt;/label&gt;
              &lt;div class="content"&gt;
                  &lt;p&gt;Stuff for Tab Three&lt;/p&gt;
              &lt;/div&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>* {
    margin: 0;
    padding: 0;
  }
  body {
      background: #999;  
  }
  #page-wrap {
    width: 1024px; 
    height: 768px;
  }
      .tabs {
        position: relative;   
        min-height: 200px; /* This part sucks */
        clear: both;
        margin: 25px 0;      
      }
      .tab {
        float: left;      
      }
      .tab label {
        background: #eee; 
        padding: 10px; 
        border: 1px solid #ccc; 
        margin-left: -1px; 
        position: relative;
        left: 1px;             
      }
      .tab [type=radio] {
        display: none;   
      }
      .content {
        position: absolute;
        top: 28px;
        left: 0;
        background: white;
        right: 0;
        bottom: 0;
        padding: 20px;
        border: 1px solid #ccc;       
      }
      [type=radio]:checked ~ label {
        background: white;
        border-bottom: 1px solid white;
        z-index: 2;
      }
      [type=radio]:checked ~ label ~ .content {
        z-index: 1;
      }
  </code></pre>
  
  <p>I was trying -webkit-transform:rotate(-90deg); but have not been able to capture the correct element. Hoping someone can help point me in the right direction.</p>