The reason is because you are using the transform property twice. Due to CSS rules with the cascade, the last declaration wins if they have the same specificity. As both transform declarations are in the same rule set, this is the case.
What it is doing is this:
See http://jsfiddle.net/Lx76Y/ and open it in the debugger to see the first declaration overwritten
As the translate is overwriting the rotate, you have to combine them in the same declaration instead: http://jsfiddle.net/Lx76Y/1/
To do this you use a space separated list of transforms:
#rotatedtext {
transform-origin: left;
transform: translate(50%, 50%) rotate(90deg) ;
}
Remember that they are specified in a chain, so the translate is applied first, then the rotate after that.