Il motivo è perché stai usando la proprietà di trasformazione due volte. A causa delle regole CSS con la cascata, l'ultima dichiarazione vince se hanno la stessa specificità. Poiché entrambe le dichiarazioni di trasformazione sono nella stessa serie di regole, questo è il caso.
Quello che sta facendo è questo:
- ruota il testo di 90 gradi. Ok.
- tradurre il 50% per il 50%. Ok, questa è la stessa proprietà del passaggio uno, quindi esegui questo passaggio e ignora il passaggio 1.
Vedi http://jsfiddle.net/Lx76Y/ e aprilo nel debugger per vedere la prima dichiarazione sovrascritta
Poiché la traduzione sovrascrive la rotazione, devi combinarli nella stessa dichiarazione: http://jsfiddle.net/Lx76Y/1/
Per fare ciò si utilizza un elenco di trasformazioni separato da spazi:
#rotatedtext {
transform-origin: left;
transform: translate(50%, 50%) rotate(90deg) ;
}
Ricorda che sono specificati in una catena, quindi la traduzione viene applicata per prima, quindi la rotazione dopo.