垂直标签使用 CSS3 变换：旋转属性定位困难答案

【问题标题】：Vertical tabs using CSS3 transform:rotate attribute positioning difficulties垂直标签使用 CSS3 变换：旋转属性定位困难
【发布时间】：2012-10-01 12:48:14
【问题描述】：

我已经设置了一个测试 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%;
}

【问题讨论】：

标签： css tabs rotation transform

【解决方案1】：

将选项卡容器的高度属性重置为整个选项卡框架的高度，即。高度：100%；添加一个 top:-40px 到容器，然后为垂直标签添加 right:0 和 top:0;

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

简单..

【讨论】：