Imagine trying to rotate a paragraph 90 degrees and position it so that its top-left corner, which becomes the top-right corner after rotation, ends up at the parent block's top-right corner.
Here's the 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;
}
In Firefox 19.0.2 on OS X 10.6.8, this method fails due to the order in which CSS properties are applied. The browser:
- moves
#textso its top-right corner aligns with the parent block's top-right corner, but not rotating yet - then rotates it, causing the new top-right corner of the rotated text to misalign with the parent block.
The use of transform-origin doesn't solve this issue effectively. If transform-origin: top right; were used, then #text would need to be shifted down by its original width before rotation.
My question: Is there a way to instruct the browser to apply CSS positioning after rotation? If not, is there an alternative method to move #text downward by the pre-rotation width?
NB. Ideally, the solution should not rely on setting a fixed width: for #text, and must avoid using JavaScript.