使用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

将选项卡容器的height属性重置为整个选项卡框架的属性，即。高度：100％;添加一个顶部：-40px到容器，然后为垂直标签添加右：0和顶部：0;

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

Simples ..