La trasformazione CSS3 non funziona

122

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

Ho usato i seguenti CSS:

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

Qualcuno potrebbe suggerirmi dove sto sbagliando?

Grazie.

html css

— Shruti
fonte

2

Cordiali saluti, IE supporta questa proprietà CSS3, hai solo bisogno di un prefisso:-ms-transform:rotate(10deg);

— Joshua Pinter

Il possibile duplicato della trasformazione CSS non funziona sugli elementi in linea

— mems

2

Dato che nessuno lo ha ancora menzionato, dal momento che è il 2016 ora assicurati di posizionare la versione senza prefisso della regola CSS (ad esempio transform: rotate(10deg);) sotto qualsiasi versione con prefisso che scegli di supportare.

— Maximillian Laumeister

301

Questa è solo un'ipotesi plausibile senza vedere il resto del tuo HTML / CSS:

Ti sei applicato display: blocko display: inline-blocka li a? In caso contrario, provalo.

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

— thirtydot
fonte

22

Ti amo! L' display: inline-blockaiuto.

— Bugs Bunny

2

Una spiegazione sarebbe utile :)

— scitronboy

56

Nei browser basati su webkit (Safari e Chrome), -webkit-transform viene ignorato sugli elementi in linea. . Preparati display: inline-block;a farlo funzionare . A scopo dimostrativo / di prova, potresti anche voler usare un angolo negativo o per transformation-originevitare che il testo venga ruotato fuori dall'area visibile.

— phihag
fonte

Ha funzionato perfettamente per me, grazie! L'ho usato su <span> & copy </span> per creare un simbolo copyleft.

— Elisabeth

@Elisabeth Questa è un'ottima applicazione. Nota che i riferimenti a entità devono essere terminati da un punto e virgola (come in <span>©</span>), sebbene la maggior parte dei browser effettui il rendering in entrambi i modi.

— phihag

Un'altra nota: se stai applicando la trasformazione per uno stato di interazione (ad es. :hoverO :active) dovrai applicare inline-blockl'elemento nel suo stato predefinito, ad es a { display: inline-block; } a:active { transform: translateY(0.125em); }. L'applicazione inline-blockallo stato di interazione da sola non sembra funzionare. Almeno in Chrome: funziona bene in Firefox.

— Paul d'Aoust

1

grazie per aver sottolineato il fatto che -webkit-transformnon funziona sugli elementi in linea. Era stato bloccato su questo in precedenza.

— pbojinov

@phihag Ottimo punto, mi hai risparmiato qualche strappo importante! Vale la pena notare che questo può far scomparire i tuoi elementi dopo che l'animazione è stata eseguita.

— texelate

21

_{Poiché nessuno ha fatto riferimento alla documentazione pertinente:}

Modulo trasformazioni CSS Livello 1 - Terminologia - Elemento trasformabile

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

un elemento il cui layout è regolato dal box model CSS che è un elemento a livello di blocco o atomico a livello di riga, o la cui proprietà di visualizzazione calcola in riga di tabella, gruppo di righe di tabella, gruppo di intestazioni di tabella, piè di pagina di tabella -gruppo, cella di tabella o didascalia di tabella

un elemento nello spazio dei nomi SVG e non governato dal box model CSS che ha gli attributi transform, 'patternTransform' o gradienteTransform.

Nel tuo caso, gli <a>elementi sono inlinedi default.

Se si modifica il displayvalore della proprietà in modo da inline-blockrendere gli elementi come elementi atomici a livello di riga , gli elementi diventano quindi "trasformabili" 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 applicabile solo nei -webkitbrowser basati poiché sembra funzionare in IE / FF a prescindere.

— Josh Crozier
fonte

0

Stai specificatamente cercando di ruotare solo i collegamenti? Perché farlo sui tag LI sembra funzionare bene.

Secondo Snook le trasformazioni richiedono che gli elementi interessati siano bloccati. Ha anche un po 'di codice lì per farlo funzionare per IE usando i filtri, se ti interessa aggiungerlo (anche se sembra che ci siano alcune limitazioni sui valori).

— su'
fonte

-4

-webkit-transform non è più necessario

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

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

— PDJ
fonte

1

Durante i miei test di oggi, ho notato che -webkit-transformeffettivamente non era più necessario in Chrome. Tuttavia, era ancora necessario in Safari 8.

— John Slegers

A cosa serve -sand-transform? Una breve ricerca su Google non ha rivelato nulla.

— Pete

google 'CSS Sandpaper' che è pertinente alla domanda e può semplificare le cose. è un hack che implementa il supporto per la trasformazione CSS standard per le vecchie versioni di IE

— Pedro Justo