垂直制表符和文本旋转

Question

我希望标签位于页面左侧而不是顶部。由于其他原因（效果），我已经在加载 JQuery，所以我更喜欢使用 JQuery 而不是另一个 UI 框架。对“垂直标签 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;
}

Answer 1

扩展了 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%，最后执行旋转。

Answer 2

JSFiddle Demo （在 IE8/9/10、Firefox、Chrome、Safari、Opera 中测试良好）

要点

• 创建一个水平标签栏并一次旋转所有标签栏比单独旋转每个标签项更简单。
• 避免同时使用BasicImage 过滤器和-ms-transform，因为在 IE9 中会应用两次旋转。 BasicImage 过滤器适用于 IE8/9。 -ms-transform 适用于 IE9。 transform 适用于 IE10。结合使用 BasicImage 过滤器和 transform 覆盖 IE8/9/10。
• 转换后的元素在布局中占据与转换前相同的空间（屏幕宽度上的水平空间），即使它显示在不同的位置。在这个version of the demo中，它占据的布局空间以蓝色显示。避免在布局中占用这些不需要的空间的一种方法是给元素绝对位置，这样它就不会占用布局中的任何空间。另一种选择是给下一个元素一个负的上边距（以“消耗”转换后元素的布局空间）。

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;
    ...
}
...