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

css, css-transforms, position, transform, vertical-alignment

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

Problem

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.

Original source

Related problems