Ruota e traduci

90

Ho dei problemi a ruotare e posizionare una riga di testo. Ora è solo la posizione che funziona. Funziona anche la rotazione, ma solo se disabilito il posizionamento.

CSS:

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

L'html è solo testo semplice.

— Sera
fonte

161

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.

— David Storey
fonte

23

Ho scoperto che il concatenamento è molto importante da tenere a mente. Confronta una traduzione seguita da una rotazione - jsfiddle.net/Mrjm8/3 - con una rotazione seguita da una traduzione - jsfiddle.net/Mrjm8/2

— Luca

Come funziona se scritto in HTML, invece che in CSS?

— JakeTheSnake

2

@ JakeTheSnake Non lo fa. Le trasformazioni CSS sono una funzionalità CSS.

— Stijn de Witt

2

Wow grazie. Dovresti mettere in grassetto l'aspetto del concatenamento :) che era un elemento chiave che molti blog e specifiche non menzionano mai!

— cgata

@Luke Grazie per averlo fatto notare, l' ordine è davvero importante!

— Yami Odymel

12

Non posso commentare quindi ecco qui. Informazioni sulla risposta di @David Storey.

Fai attenzione all '"ordine di esecuzione" nelle catene CSS3! L'ordine è da destra a sinistra, non da sinistra a destra.

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

L' rotateoperazione viene eseguita prima, quindi il file translate.

Vedere: L' ordine di trasformazione CSS3 è importante: prima l'operazione più a destra

— darthRods
fonte

4

Non ce n'è bisogno, dato che puoi usare CSS 'writing-mode' con valori 'vertical-lr' o 'vertical-rl' come desideri.

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

— biojazzard
fonte

2

Qualcosa che potrebbe sfuggire: nel mio progetto di concatenamento, risulta che un elenco separato da spazi necessita anche di un punto e virgola separato da spazi 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 ";"

— Brian Coyle
fonte