Ruota e converti

Question

Sto riscontrando alcuni problemi nella rotazione e nel posizionamento di una riga di testo. Ora è solo la posizione che funziona. La rotazione funziona anche, ma solo se disattivo il posizionamento.

CSS:

#rotatedtext { 
    transform-origin: left; 
    transform: rotate(90deg); 
    transform: translate(50%, 50%); 
} 

il codice HTML è solo testo.

Answer 1

Il motivo è perché si sta utilizzando 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 si trovano nello stesso insieme di regole, questo è il caso.

quello che sta facendo è questo:

1. ruotare il testo di 90 gradi. Ok.
2. tradurre 50% 50%. Ok, questa è stessa struttura come passo uno, in modo da fare questo passo e ignorare passaggio 1.

Vedere http://jsfiddle.net/Lx76Y/ e aprirlo nel debugger per visualizzare la prima dichiarazione sovrascritto

Come tradurre sovrascrive la rotazione , è necessario combinare loro nella stessa dichiarazione, invece: http://jsfiddle.net/Lx76Y/1/

per fare questo si utilizza un elenco separato da spazi di trasformazioni:

#rotatedtext { 
    transform-origin: left; 
    transform: translate(50%, 50%) rotate(90deg) ; 
} 

Re membro che sono specificati in una catena, quindi la traduzione viene applicata prima, quindi la rotazione dopo.

Answer 2

Non è necessario, poiché è possibile utilizzare css 'modalità scrittura' con valori 'verticale-lr' o 'verticale-rl' come desiderato.

.item { 
    writing-mode: vertical-rl; 
} 

Answer 3

Qualcosa che può inevasa: nel mio progetto concatenamento, si scopre un elenco separato da spazio ha bisogno anche di un separato virgola spazio alla fine.

In altre parole, questo non funziona:

transform: translate(50%, 50%) rotate(90deg); 

ma questo fa:

transform: translate(50%, 50%) rotate(90deg) ; //has a space before ";" 

Answer 4

non posso commentare quindi ecco qui. Informazioni su @David Risposta al piano.

Prestare attenzione all '"ordine di esecuzione" nelle catene CSS3! La regola è (a destra) da (a sinistra). Non da sinistra a destra.

transformation: translate(0,10%) rotate(25deg); 

L'operazione di "rotazione" viene eseguita per prima, che l'operazione "translate" viene dopo/secondo.

Vedi: CSS3 transform order matters: rightmost operation first