垂直標籤和文本旋轉

我想在頁面的左側，而不是在頂部的標籤。我已經爲其他原因（效果）加載了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; 
}

來源

2013-06-23 Melih Büyükbayram

JSFiddle Demo

（在IE8/9/10，火狐，鉻，Safari，Opera或測試細）要點

這是簡單的創建水平的標籤欄和旋轉它的所有的ONC e，而不是分別旋轉每個標籤項目。
避免同時使用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; 
    ... 
} 
...

來源

2013-06-24 16:45:00

馬特很好做！ – nolabel

馬特真棒。謝謝:) –

擴大馬特考夫林的答案，這個工作對我來說更好，而不必硬編碼的長度以像素爲單位，從而使標籤可具有可變長度：

#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％，最後執行旋轉。

來源

2015-12-17 17:29:47 AsGoodAsItGets

對於那些有興趣，這裏是一個工作的jsfiddle：http://jsfiddle.net/pqo6vfkd/ – Campbeln

垂直標籤和文本旋轉

回答

相關問題