Это должна быть очень простая проблема, о которой вы думаете. У меня есть коробка с текстом заголовка, который я хочу повернуть на -90 градусов. Я бы хотел, чтобы он был абсолютно позиционирован так, что конец слова подталкивается в верхний левый угол. Я могу получить это, чтобы выровнять по дну достаточно легко, но проблема в том, что с текстом переменной длины кажется невозможным, чтобы он постоянно оставался в контейнере при выравнивании к вершине, потому что такие вещи, как {top: 0}, работают над заголовком перед преобразованием, Для моих целей это нужно только в Firefox. Я могу использовать javascript, если это единственное решение, но вы бы подумали, что это можно сделать только с помощью CSS.
Как вы выровняете скорректированный текст 270deg в верхнем левом углу?
Ответ 1
Вы должны использовать 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>
Ответ 2
Также может работать без права: 100% Просто поверните на 270 град вокруг левого верха, а затем переведите его на новую 100% ширину.
transform: rotate(-90deg) translate(-100%, 0);
transform-origin: 0 0;