使用CSS3變換的垂直製表符：旋轉屬性定位困難

Question

我建立了一個測試FIDDLE，其中包含我們所需的所有標籤水平工作的工具。

這些類還允許標籤在左側或右側使用不同的CSS類垂直工作。問題是他們沒有被正確定位。這我想象是由於轉換起源屬性，但我掙扎。

http://jsfiddle.net/H7gG8/19/

.tabs { 
    width:400px; height:400px; 
} 
.tab { 
    position:relative; 
} 
.tab li { 
    border-radius:10px 10px 0 0; height:40px; width:110px; background:#DDD; float:left; cursor:pointer; 
} 
.tab.v { 
    -webkit-transform:rotate(90deg); 
} 
.tab li.l { 
    width:180px; 
} 
.tab.r { 
    -webkit-transform:rotate(-90deg); 
} 
.tab.r li { 
    float:right; 
} 
.tabs .conts { 
    height:100%; position:relative; clear:both; 
} 
.tabs .cont { 
    background:#EEE; height:300px; position:absolute; width:100%; 
} 
​ 

Answer 1

重置的標籤容器的高度屬性來使整個標籤框架即。高度：100％;添加一個頂部：-40px的容器，然後爲垂直標籤添加右：0和頂部：0;

http://jsfiddle.net/H7gG8/71/

Simples ..