Pionowe zakładki i obracanie tekstu

Question

Chcę mieć zakładki po lewej stronie zamiast u góry. Już ładuję JQuery z innych powodów (efektów), więc wolę używać JQuery do innej struktury UI. Wyszukiwania "jQuery zakładek pionowych" dają linki do prac będących w toku.

Czy uruchamianie pionowych zakładek działa w różnych przeglądarkach, czy jest tak banalnie proste, że po rozwiązaniu nie ma sensu publikować przykładowego kodu?

W poniższym ekranu pionowe zakładki są przedstawione na czerwono: 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   (testowany dobrze w IE8/9/10, Firefox, chrom, Safari opera)

Kluczowe punkty:

• Łatwiej jest utworzyć poziomy pasek kart i obrócić go w Onc e, zamiast obracać każdy element karty osobno.
• Unikaj używania filtru BasicImage i -ms-transform, ponieważ obrót zostanie zastosowany dwukrotnie w IE9. Filtr IE8/9 stosuje filtr BasicImage. -ms-transform dotyczy IE9. transform dotyczy IE10. Używanie kombinacji filtra BasicImage i pokrywy IE8/9/10.
• Przekształcony element zajmuje to samo miejsce w układzie, w którym znajdował się przed transformacją (poziome odstępy na całej szerokości ekranu), nawet jeśli jest wyświetlany w innym miejscu. W tym version of the demo zajmowana przez niego przestrzeń układana jest kolorem niebieskim. Jednym ze sposobów uniknięcia niechcianego miejsca zajmowanego w układzie jest nadanie elementowi absolutnej pozycji, tak aby nie zajmował on żadnego miejsca w układzie. Inną opcją jest nadanie kolejnemu elementowi ujemnego górnego marginesu ("pochłonięcia" przestrzeni układu przekształconego elementu).

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

Rozwijając na odpowiedź Matt Coughlin, ten pracował dla mnie lepiej, bez konieczności hardcode długości w pikselach, tak że wypustki może mieć zmienną długość:

#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); 
} 

Ustawia początek transformacji w prawym górnym rogu paska kart, następnie tłumaczy cały pasek w lewo o 100%, a na końcu wykonuje obrót.