Рассмотрим следующую попытку повернуть абзац на 90 градусов и поместить его так, чтобы угол, который изначально был его верхним левым углом (и который, следовательно, стал его верхним правом углом после поворота), оказался в правом верхнем углу угол родительского блока.
HTML:
<!DOCTYPE html>
<html>
<body>
<div id="outer">
<p id="text">Foo bar</p>
</div>
</body>
</html>
CSS
#outer {
border: solid 1px red;
width:600px;
height: 600px;
position: relative;
}
#text {
transform: rotate(90deg);
position: absolute;
top: 0;
right: 0;
}
В Firefox 19.0.2 на OS X 10.6.8 он терпит неудачу. Это связано с тем, что, несмотря на порядок, в котором были указаны свойства CSS, преобразование применяется после позиционирования. Другими словами, браузер:
- помещает
#textтак, чтобы его верхний правый угол находился в верхнем правом углу родительского блока, но только тогда - вращает его, в результате в верхнем правом углу находится не, расположенный в верхнем правом углу родительского блока.
В результате свойство transform-origin здесь мало используется. Если, например, один использовал transform-origin: top right;, то #text нужно было бы перемещать вниз по ширине, которая была перед поворотом.
Мой вопрос: есть способ сообщить браузеру применить свойства позиционирования CSS после вращения; а если нет, то вместо этого существует способ перемещения #text вниз (например, с помощью top:) по ширине, которая была до, она была повернута?
NB. В идеале решение не должно требовать установки фиксированного width: для #text и не требует JavaScript.