Как выровнять повернутый на 270 градусов текст по левому верхнему углу? - PullRequest
15 голосов
/ 06 октября 2011

Это должно быть очень простой проблемой, как вы думаете.У меня есть поле с текстом заголовка, который я хочу повернуть на -90 градусов.Я бы хотел, чтобы оно было расположено абсолютно так, чтобы конец слова смещался в верхний левый угол.Я могу достаточно легко выровнять его по нижнему краю, но проблема в том, что при использовании текста переменной длины невозможно обеспечить его постоянное нахождение в контейнере при выравнивании по верху, поскольку такие вещи, как {top: 0}, работают с заголовком до преобразования,Для моих целей это нужно только для работы в Firefox.Я могу использовать javascript, если это единственное решение, но вы можете подумать, что это можно сделать только с помощью CSS.

Ответы [ 2 ]

27 голосов
/ 06 октября 2011

Вы должны использовать transform-origin, чтобы отрегулировать точку преобразования, наряду с некоторым творческим использованием свойств позиционирования.

http://jsfiddle.net/thirtydot/JxEfs/1/

CSS:

#box {
    padding: 30px;
    position: relative;
    border: 1px solid blue;
}
#box > div {
    border: 1px solid red;
    position: absolute;
    top: 0;
    right: 100%;
    white-space: nowrap;

    -webkit-transform: rotate(270deg);
    -webkit-transform-origin: right top;
    -moz-transform: rotate(270deg);
    -moz-transform-origin: right top;
    -ms-transform: rotate(270deg);
    -ms-transform-origin: right top;
    -o-transform: rotate(270deg);
    -o-transform-origin: right top;
    transform: rotate(270deg);
    transform-origin: right top;
}

HTML:

<div id="box">
    hello
    <div>rotated!</div>
</div>
11 голосов
/ 08 мая 2014

Может также работать без права: 100% Просто поверните на 270 градусов вокруг левой верхней части и затем переведите его обратно на новую ширину 100%.

transform: rotate(-90deg) translate(-100%, 0);
transform-origin: 0 0;

http://jsfiddle.net/zW7SP/

...