Trasformazione CSS3 non funzionante

Question

Sto cercando di trasformare le voci del mio menu ruotandole di 10 gradi. Il mio CSS funziona in Firefox ma non riesco a replicare l'effetto in Chrome e Safari. So che IE non supporta questa proprietà CSS3 quindi non è un problema.

ho usato seguente CSS:

li a { 
    -webkit-transform:rotate(10deg); 
    -moz-transform:rotate(10deg); 
    -o-transform:rotate(10deg); 
} 

Qualcuno potrebbe suggerire prego dove sto andando male?

Grazie.

Answer 1

questo è solo un'ipotesi senza vedere il resto del codice HTML/CSS:

Avete applicato display: block o display: inline-block-li a? Altrimenti, provalo.

Altrimenti, provare ad applicare le regole di trasformazione CSS3 a li.

Answer 2

Stai provando in particolare a ruotare solo i collegamenti? Perché farlo on the LI tags sembra funzionare correttamente.

According to Snook trasformazioni richiedono il blocco degli elementi interessati. Ha anche ricevuto del codice per far funzionare questo lavoro per IE usando i filtri, se ci tenete ad aggiungerlo (anche se sembra esserci qualche limite sui valori).

Answer 3

Nei browser basati su webkit (Safari e Chrome), -webkit-transformis ignored on inline elements.. Impostare display: inline-block; su make it work. A scopo di dimostrazione/test, potresti anche voler utilizzare un angolo negativo o uno transformation-origin per evitare che il testo venga ruotato fuori dall'area visibile.

Answer 4

-webkit-transform c'è più bisogno

ms già supportano la rotazione (-ms-transform: rotate(-10deg);)

provare questo:

li a { 
    ... 

    -webkit-transform: rotate(-10deg); 
    -moz-transform: rotate(-10deg); 
    -o-transform: rotate(-10deg); 
    -ms-transform: rotate(-10deg); 
    -sand-transform: rotate(10deg); 
    display: block; 
    position: fixed; 
    } 

Answer 5

_{Dal momento che nessuno riferimento relativa documentazione:}

CSS Transforms Module Level 1 - Terminology - Transformable Element

Un elemento trasformabile è un elemento in una di queste categorie:

• un elemento la cui disposizione è regolata dal box model ovvero un block-level o atomic inline-level element, o la cui display property calcola a table-row , gruppo tabella-riga, gruppo-intestazione tabella, gruppo-piè di pagina-tabella, cella-tabella o didascalia della tabella
• un elemento nel namespace SVG e non governato dal modello di box CSS che ha gli attributi transform, 'patternTransform' o gradientTransform.

Nel tuo caso, gli elementi sono <a>inline per impostazione predefinita.

Cambiando il valore della proprietà display a inline-block rende gli elementi come atomic inline-level elements, e pertanto gli elementi diventano "transformable" per definizione.

li a { 
    display: inline-block; 
    -webkit-transform: rotate(10deg); 
    -moz-transform: rotate(10deg); 
    -o-transform: rotate(10deg); 
    transform: rotate(10deg); 
} 

Come accennato in precedenza, questo sembra solo applicabile in -webkit browser basati su quanto sembra funzionare in IE/FF a prescindere.