CSS3 trasformare ruotare il testo, posizione fissa sinistra e destra, centrato verticalmente

Question

Sto provando a posizionare un elemento a sinistra e uno a destra della finestra del browser, entrambi contengono uno ul con trasformazione CSS ruota. Sono riuscito a posizionare .rotate-left e il suo ul a sinistra, ma non sono riuscito a posizionare lo ul all'interno di .rotate-right a destra. (Ha bisogno di essere visibile su una linea orizzontale da destra a sinistra, se trasformare non è supportato.)

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

Ho costruito su questo 100% height block with vertical text.

Answer 1

Ho risolto e pulito il codice un po '.

.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

Penso di averlo capito più o meno bene. Sarebbe:

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

Non è necessario tradurre se si sceglie ok l'origine della trasformazione; andare al 78% sarebbe quello di compensare la li larghezza