CSS 3: text rotation bug?

Question

I don\'t understand how text rotation works in CSS3.

For instance, you can see it here, the rotated text is never on the right location as you want it,

Answer 1

Positioning the text is not very difficult when you realize you can control the rotation point through...

transform-origin: 0 0 || top left

In your specific case, it works out like this:

.year
{
    display: block;
    writing-mode: tb-rl;
    -webkit-transform: rotate(270deg);
    -webkit-transform-origin: bottom left;   
    -moz-transform: rotate(270deg);
    -moz-transform-origin: bottom left; 
    -o-transform: rotate(270deg);
    -o-transform-origin: bottom left; 
    -ms-transform: rotate(270deg);
    -ms-transform-origin: bottom left; 
    transform: rotate(270deg);
    transform-origin: bottom left;  
    font-size: 24px; 
    position: absolute;
    right: -50px; /*.year width*/
    bottom: 0;
    border: 1px solid #000000; 
}

If you take out the transformation, you will notice that .year is positioned right next to it's parent box, bottom aligned. Then you specify the bottom left corner to be the "rotation point" and voila! Absolute control over your text positioning.

http://jsfiddle.net/PQ3Ga/