CSS3 transform rotate text, fixed position left and right, vertically centered

Question

I'm trying to position one element to the left and one to the right of the browser window, both contains an ul with CSS transform rotate. I have managed to position .rotate-left and its ul to the left, but I have been unable to position the ul inside .rotate-right to the right. (It needs to be visible on a horizontal line from right to left if transform is not supported.)

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

I have built upon this 100% height block with vertical text.

Solution

I solved it and cleaned the code up a bit.

.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

Comments

[michael]

I just noted that I forgot to add padding: 0; on ul, sorry. I have updated the demo. Your solution is still close tho. About 30px of vertically.

[Diego Fortes]

This is an outstanding solution, thank you very much!