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

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

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％，最后执行旋转。

垂直制表符和文本旋转

2 个答案: