css - 垂直标签使用 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%；向容器添加一个 top:-40px ，然后为垂直选项卡添加 right:0 和 top:0；

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

简单的..