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.

michael · Accepted Answer · 2014-05-14T17:41:09.163

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

This is an outstanding solution, thank you very much! – Diego Fortes Jun 07 '17 at 16:24 — Diego Fortes, Jun 07 '17 at 16:24

score -1 · Answer 2 · answered Mar 10 '13 at 22:25

-1

I think that I get it more or less right. It would be:

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

You don't need to translate if you choose ok the transform origin; going to 78% would be to compensate for the li width

answered Mar 10 '13 at 22:25

vals

61,425
11
89
138

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. – michael Mar 11 '13 at 02:13

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

2 Answers2

Linked