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.

Risposte:


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:

  1. ruota il testo di 90 gradi. Ok.
  2. 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.


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


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;
}

CSS: modalità di scrittura


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 ";"
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.