Il CSS ruota la proprietà in IE

Voglio ruotare il DIV in una certa misura. In FF funziona ma in IE sto affrontando un problema.

Ad esempio nel seguente stile posso impostare la rotazione = da 1 a 4

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 

Ciò significa che il DIV verrà ruotato su 90 o 180 o 270 o 360 gradi. Ma se ho bisogno di ruotare il DIV solo 20 gradi, allora non funziona più.

Come posso risolvere questo problema in IE?

Per ruotare di 45 gradi in IE, hai bisogno del seguente codice nel tuo foglio di stile:

 filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */ 

Noterai da quanto sopra che IE8 ha una syntax diversa da IE6 / 7. È necessario fornire entrambe le righe di codice se si desidera supportare tutte le versioni di IE.

I numeri orribili ci sono in radianti; dovrai elaborare le figure per te stesso se vuoi utilizzare un angolo diverso da 45 gradi (ci sono tutorial su internet se li cerchi).

Si noti inoltre che la syntax IE6 / 7 causa problemi ad altri browser a causa del simbolo dei due punti senza escape nella stringa del filtro, il che significa che è un CSS non valido. Nei miei test, questo fa sì che Firefox ignori tutto il codice CSS dopo il filtro. Questo è qualcosa di cui devi essere consapevole in quanto può causare ore di confusione se ne viene colto di sorpresa. Ho risolto questo problema con il materiale specifico IE in un foglio di stile separato che altri browser non hanno caricato.

Tutti gli altri browser correnti (inclusi IE9 e IE10 – yay!) Supportano lo stile di transform CSS3 (anche se spesso con prefissi dei fornitori), quindi è ansible utilizzare il seguente codice per ottenere lo stesso effetto in tutti gli altri browser:

 -moz-transform: rotate(45deg); /* FF3.5/3.6 */ -o-transform: rotate(45deg); /* Opera 10.5 */ -webkit-transform: rotate(45deg); /* Saf3.1+ */ transform: rotate(45deg); /* Newer browsers (incl IE9) */ 

Spero possa aiutare.

modificare

Dal momento che questa risposta si sta ancora alzando-voti, sento che dovrei aggiornarla con le informazioni su una libreria JavaScript chiamata CSS Sandpaper che ti permette di usare (vicino) il codice CSS standard per le rotazioni anche nelle vecchie versioni di IE.

Dopo aver aggiunto la carta vetrata CSS al tuo sito, dovresti essere in grado di scrivere il seguente codice CSS per IE6-8:

 -sand-transform: rotate(40deg); 

Molto più semplice dello stile di filter tradizionale che dovresti normalmente usare in IE.

modificare

Si noti inoltre una stranezza in particolare con IE9 (e solo IE9), che supporta sia la transform standard che il -ms-filter IE -ms-filter vecchio stile vecchio. Se hai specificato entrambi, ciò può comportare che IE9 si confonda completamente e che mostri solo una casella nera solida in cui l’elemento sarebbe stato. La soluzione migliore è evitare lo stile del filter usando il polifraggio con carta vetrata sopra menzionato.

Dovrai eseguire una trasformazione matrix come segue:

 filter: progid:DXImageTransform.Microsoft.Matrix( M11 = COS_THETA, M12 = -SIN_THETA, M21 = SIN_THETA, M22 = COS_THETA, sizingMethod = 'auto expand' ); -ms-filter: "progid:DXImageTransform.Microsoft.Matrix( M11 = COS_THETA, M12 = -SIN_THETA, M21 = SIN_THETA, M22 = COS_THETA, SizingMethod = 'auto expand' )"; 

Dove COS_THETA e SIN_THETA sono i valori del coseno e del seno dell’angolo (cioè 0.70710678 per 45 °).

Esiste uno strumento online chiamato IETransformsTranslator. Con questo strumento puoi creare un filtro matrix che trasforma ciò che funziona su IE6, IE7 e IE8. Basta incollare le funzioni di trasformazione CSS3 (ad es. Ruotare (15 gradi)) e farà il resto. http://www.useragentman.com/IETransformsTranslator/

http://css3please.com/

Scorri verso il basso fino a “.box_rotate” per il prefisso Microsoft IE9 +. Discussione simile qui: Rotazione di un elemento Div in jQuery

Solo un suggerimento … pensaci due volte prima di usare “trasforma: ruota ()”, o anche “-ms-trasforma: ruota ()” (IE9) con i cellulari!

Ho bussato duramente al muro per giorni. Ho un sistema ‘cinetico’ in corso, che fa scorrere le immagini e, in aggiunta, un’area di comando. Ho “trasformato” su un pulsante freccia in modo da simulare il puntamento verso l’alto e verso il basso … Ho recensito le linee di codice da 1.000 più per secoli !!! 😉

Tutto ok, una volta rimossa la trasformazione: ruota dal CSS. È un po ‘difficile (non usare parolacce) il modo in cui IE lo gestisce, confrontandolo con altri utenti.

Ottima risposta @Spudley! Grazie per averlo scritto!

Link utili per la trasformazione di IE

Questo strumento converte le proprietà di trasformazione CSS3 (utilizzate da quasi tutti i browser moderni) in CSS equivalenti utilizzando la tecnologia proprietaria dei filtri visivi di Microsoft.

Per esempio IE11 (tipo browser = versione Trident = 7.0):

 image.style.transform = "rotate(270deg)";