css - 使用 CSS3 转换的垂直制表符 :rotate attribute positioning difficulties

Question

我已经设置了一个测试 FIDDLE，其中包含标签水平工作所需的所有工具。

这些类还允许选项卡使用不同的 CSS 类在左侧或右侧垂直工作。问题是它们没有正确定位。我想这是由于 transform origin 属性造成的，但我很挣扎。

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/

简单..