Вопрос по vertical-alignment, transform, position, css3, css-transforms – CSS3 преобразование поворота текста, фиксированная позиция влево и вправо, по центру

8

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% с вертикальным текстом.

Ваш Ответ

2   ответа
20

Я решил это и немного очистил код.

.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%);
}

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

Это выдающееся решение, большое спасибо! PossessWithin
0

Я думаю, что я понимаю это более или менее правильно. Это было бы:

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

Ты нене нужно переводить, если вы выбрали ok источник преобразования; переход на 78% будет компенсировать ширину li

Я просто заметил, что забыл добавитьpadding: 0; наul, извиняюсь. Я обновил демо. Ваше решение все еще близко. Около 30 пикселей по вертикали. michael

Похожие вопросы