m пытается расположить один элемент слева и один справа от окна браузера, оба содержатul с помощью CSS transform rotate. Мне удалось позиционировать.rotate-left И егоul слева, но я не смогul внутри.rotate-right направо. (Он должен быть виден на горизонтальной линии справа налево, если преобразование не поддерживается.)

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: -

    
        left
        left
        left
    


    
        right
        right
        right
    

Демо-версия:http://codepen.io/anon/pen/FtyEG

Я построил на этомБлок высоты 100% с вертикальным текстом.