Konwertuj tabulacje poziome na pionowe (tylko HTML i CSS, bez js)

Question

Próbuję utworzyć podstawowy portal z kartami po lewej, a nie na górze. Idealnie, chciałbym osiągnąć to bez żadnego javascript; z HTML5 & Tylko CSS3.

Grałem z następującego kodu do zakładek poziomych: http://jsfiddle.net/Juggler/9Ue9j/2/

<div id="page-wrap"> 
    <div class="tabs"> 
     <div class="tab"> 
      <input type="radio" id="tab-1" name="tab-group-1" checked> 
      <label for="tab-1">Tab One</label> 
      <div class="content"> 
       <p>Stuff for Tab One</p> 
      </div> 
     </div> 
     <div class="tab"> 
      <input type="radio" id="tab-2" name="tab-group-1"> 
      <label for="tab-2">Tab Two</label> 
      <div class="content"> 
       <p>Stuff for Tab Two</p> 
      </div> 
     </div> 
     <div class="tab"> 
      <input type="radio" id="tab-3" name="tab-group-1"> 
      <label for="tab-3">Tab Three</label> 
      <div class="content"> 
       <p>Stuff for Tab Three</p> 
      </div> 
     </div> 
    </div> 
</div> 

i

* { 
    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; 
    } 

starałem -webkit-transform: Obrót (-90deg); ale nie udało się uchwycić właściwego elementu. Mam nadzieję, że ktoś pomoże mi wskazać właściwy kierunek.

Answer 1

Working DEMO

Poprawiono niektóre CSS dla content & label

* { 
    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; */  
     height: 41px; 
    } 
    .tab label { 
     background: #eee; 
     padding: 10px; 
     border: 1px solid #ccc; 
     margin-left: -1px; 
     position: relative; 
     left: 1px;   
     width: 70px; 
     display: block; 
    } 
    .tab [type=radio] { 
     display: none; 
    } 
    .content { 
     position: absolute; 
     top: 0px; 
     left: 92px; 
     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; 
    }