Vertical text / tabs with CSS3 transform matrix

These days the UI trends are changing rapidly, everyone is trying to implement something different than regular. For a long time we have always implemented the tabs in horizontal format, we did try to keep the tabs in vertical format but it wasn't easily possible with creepy IE browsers. CSS3 transforms have made the web a lot different than before. Scaling, skewing, rotating, translates are doing beautiful magic with their capabilities.

Today, implementing vertical text / tabs is possible with CSS3 transform matrix. Here is the code -

Browser compatibility: IE 9+

HTML:

  

    
Tab 3
    
Tab 2
    
Tab 1
  

CSS:

.tabs-vertcal{ 
 transform-origin: 0% 0% 0px; 
 transform: matrix(0, -1, 1, 0, 0, 350); 
}
.tabs{
 list-style-type: none;
}
.tab{
 float: left; 
 width: 92px; 
 padding: 6px; 
 border: 1px solid pink; 
 background: indigo; 
 color: white;
 text-align: right;
}

Demo: http://jsfiddle.net/oy3gnuxr/1/



Note: It's just a vertical text for now, I'll add the tabs functionality with jQuery soon.