Przekształć tekst CSS3, obróć tekst, pozycja stała w lewo i w prawo, pionowo wyśrodkowany

Question

Próbuję umieścić jeden element po lewej i jeden po prawej stronie okna przeglądarki, oba zawierają ul z obrotem przekształcania CSS. Udało mi się ustawić .rotate-left i jego ul po lewej stronie, ale nie byłem w stanie ustawić ul wewnątrz .rotate-right po prawej stronie. (To musi być widoczny na linii poziomej od prawej do lewej, czy przekształcić nie jest obsługiwany).

CSS:

.rotate-left ul li, 
.rotate-right ul li { 
    display: inline; 
} 

.rotate-left { 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    width: 10em; 
    white-space: nowrap; 
    background: silver; 
} 

.rotate-left ul { 
    display: inline-block; 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    height: 1.5em; 
    margin: auto; 
    background: red; 
    -webkit-transform-origin: 0 50%; 
     -moz-transform-origin: 0 50%; 
    -webkit-transform: rotate(-90deg) translate(-50%, 50%); 
     -moz-transform: rotate(-90deg) translate(-50%, 50%); 
} 

.rotate-right { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    width: 10em; 
    white-space: nowrap; 
    background: silver; 
} 

.rotate-right ul { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    height: 1.5em; 
    margin: auto; 
    background: red; 
    -webkit-transform-origin: 0 50%; 
     -moz-transform-origin: 0 50%; 
    -webkit-transform: rotate(90deg) translate(-50%, 50%); 
     -moz-transform: rotate(90deg) translate(-50%, 50%); 
} 

HTML:

<div class="rotate-left"> 
    <ul> 
     <li>left</li> 
     <li>left</li> 
     <li>left</li> 
    </ul> 
</div> 
<div class="rotate-right"> 
    <ul> 
     <li>right</li> 
     <li>right</li> 
     <li>right</li> 
    </ul> 
</div> 

-

Demo: http://codepen.io/anon/pen/FtyEG

Zbudowałem na tym 100% height block with vertical text.

Answer 1

Rozwiązałem go i trochę wyczyściłem kod.

.left, 
.right { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    height: 1.5em; 
    margin: auto; 
} 

.left { 
    left: 0; 
    -webkit-transform-origin: 0 50%; 
     -moz-transform-origin: 0 50%; 
     -ms-transform-origin: 0 50%; 
     -o-transform-origin: 0 50%; 
      transform-origin: 0 50%; 
    -webkit-transform: rotate(-90deg) translate(-50%, 50%); 
     -moz-transform: rotate(-90deg) translate(-50%, 50%); 
     -ms-transform: rotate(-90deg) translate(-50%, 50%); 
     -o-transform: rotate(-90deg) translate(-50%, 50%); 
      transform: rotate(-90deg) translate(-50%, 50%); 
} 

.right { 
    right: 0; 
    -webkit-transform-origin: 100% 50%; 
     -moz-transform-origin: 100% 50%; 
     -ms-transform-origin: 100% 50%; 
     -o-transform-origin: 100% 50%; 
      transform-origin: 100% 50%; 
    -webkit-transform: rotate(90deg) translate(50%, 50%); 
     -moz-transform: rotate(90deg) translate(50%, 50%); 
     -ms-transform: rotate(90deg) translate(50%, 50%); 
     -o-transform: rotate(90deg) translate(50%, 50%); 
      transform: rotate(90deg) translate(50%, 50%); 
} 

Demo: http://codepen.io/anon/pen/LHeaB

Answer 2

Myślę, że mam go mniej lub bardziej w porządku. Będzie to:

.rotate-right ul { 
    -webkit-transform-origin: 78% 100%; 
    -webkit-transform: rotate(90deg) translate(0%, 0%); 

Nie musisz tłumaczyć, jeśli wybierzesz ok pochodzenia transformacji; do 78% byłoby zrekompensowanie szerokości li