jquery – 垂直制表符和文本旋转

关键点

>创建水平标签栏并一次旋转所有标签栏更简单,而不是分别旋转每个标签项.
>避免同时使用BasicImage过滤器和-ms-transform,因为旋转将在IE9中应用两次. BasicImage过滤器适用于IE8 / 9. -ms-transform适用于IE9.转换适用于IE10.使用BasicImage过滤器和变换的组合覆盖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;
    ...
}
...