垂直标签页和文本旋转

Question

我希望页面左侧能够有选项卡而不是在顶部。我已经因为其他原因（效果）加载了JQuery，所以我更喜欢使用JQuery而不是其他UI框架。在“vertical tabs jquery”上搜索会得到一些正在进行中的链接。

让垂直选项卡在各个浏览器上正常工作是很困难的吗？还是说一旦你有了解决方案，它就变得非常简单，不值得发布示例代码？

在下面的屏幕截图中，红色标出了垂直选项卡：http://cl.ly/image/2y0t1f1L0u00

#tab li {
    cursor: pointer;
    font-size: 12px;
    line-height: 12px;
    background: #fff;
    border: 1px solid #000;
    padding: 10px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    width: 140px;
    height: 130px;
    padding: 0 !important;
    -webkit-transform: rotate(-90deg) translate(-30px, 60px);
       -moz-transform: rotate(-90deg) translate(-30px, 60px);
        -ms-transform: rotate(-90deg) translate(-30px, 60px);
         -o-transform: rotate(-90deg) translate(-30px, 60px);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#tab li a {
    display: inline;
    margin: 55px 0 0 -25px;
}

- Melih Büyükbayram

Answer 1

JSFiddle演示  （在IE8/9/10、Firefox、Chrome、Safari和Opera中测试通过）

要点

• 创建一个水平选项卡栏并将其一起旋转，比分别旋转每个选项卡项更简单。
• 避免同时使用BasicImage过滤器和-ms-transform，因为在IE9中会应用两次旋转。 BasicImage过滤器适用于IE8/9。-ms-transform适用于IE9。transform适用于IE10。使用BasicImage过滤器和transform的组合可覆盖IE8/9/10。
• 变形元素占据的是变形前所占据的布局空间（屏幕宽度上的水平空间），即使它显示在不同的位置。 在此版本的演示中，展示了它所占据的布局空间（蓝色区域）。避免在布局中占用这些不需要的空间的一种方法是给该元素绝对定位，这样它就不会占据布局中的任何空间。另一种方法是给下一个元素设置负上边距（以"消耗"变形元素的布局空间）。

HTML

<div class="wrapper">
    <ul id="tab">
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
    </ul>
</div>

CSS（层叠样式表）

.wrapper {
    position: relative;
    width: 488px;
}
#tab {
    position: absolute;
    height: 52px;
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: rotate(-90deg) translate(-488px, 0px);
       -moz-transform: rotate(-90deg) translate(-488px, 0px);
         -o-transform: rotate(-90deg) translate(-488px, 0px);
            transform: rotate(-90deg) translate(-488px, 0px);         /* IE10 */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE8/9 */
    ...
}
#tab li {
    float: left;
    width: 120px;
    height: 50px;
    border: 1px solid #000;
}
#tab li a {
    display: block;
    padding: 10px;
    ...
}
...

- Matt Coughlin

Answer 2

在Matt Coughlin的回答基础上，以下方法对我更加有效，而且不需要以像素硬编码长度，因此可以使选项卡具有可变长度：

#tab {
   position: absolute;
   -webkit-transform-origin: 100% 0;
      -moz-transform-origin: 100% 0;
        -o-transform-origin: 100% 0;
           transform-origin: 100% 0;
   -webkit-transform: translate(-100%, 0) rotate(-90deg);
      -moz-transform: translate(-100%, 0) rotate(-90deg);
        -o-transform: translate(-100%, 0) rotate(-90deg);
           transform: translate(-100%, 0) rotate(-90deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

它将变换原点设置在选项卡条的右上角，然后先将整个条向左平移100％，最后执行旋转。

- AsGoodAsItGets