Rotazione immagini

[bagnacaoda]

Ciao a tutti.
Vorrei ruotare un'immagine, un div, un elemento flash. Insomma: qualsiasi cosa.
Sono piu di tre ore che vado in giro su internet e sto trovando un sacco di soluzioni, ma nessuna che vada bene contemporaneamente per IE e per gli altri browser (sto testando su un IE8, ultimo Chrome, ultimo Firefox, ultimo Opera, Safari).

Per ora il mio codice è:

.menu_principale {
position: relative;
top: 556px;
left: 220px;
border: none;

/* rotazione */
width: 100%;

-o-transform: rotate(1deg); /* Opera 10.5 */
-webkit-transform: rotate(1deg); /* Safari 3.1 +, Chrome */
-moz-transform: rotate(1deg); /* Firefox 3.5 + */
-ms-transform: rotate(1deg); /* IE 9 */
transform: rotate(1deg);
/* da IE 6 a IE 9 */
filter: progidXImageTransform.Microsoft.Matrix(sizingMethod='aut o expand',
M11=0.9999999536,
M12=-0.000304617,
M21=0.000304617,
M22=0.9999999536);
}


I problemi che riscontro sono due:

1. come potete vedere, nella matrice ho impostato le formule per la rotazione di 1 grado. Tutti i browser ruotano di questa inezia, tranne (ovviamente) IE.

2. se voglio applicare la stessa regola in un altro ID (cioè se voglio ruotare anche un altro oggetto) non funziona più. Sempre e solo in IE.

Qualche soluzione ???
Grazie !!!!

[Simo990]

L'unica soluzione cross browser ora come ora penso sia un'immagine ruotata...

[ldetomi]

o soluzioni JavaScript...........

[bagnacaoda]

uhm... ok, allora avete qualche soluzione javascript da consigliarmi ???
(tra parentesi ho provato anche quelle, penso di aver sbagliato qualcosa, allora...)
Grazieeeee !!!!

[ldetomi]

Meglio sottoporre il tuo problema nel forum dedicato... vedrai che lì trovi senz'altro esperti di JS che ti sapranno dare la soluzione migliore :-)

[bagnacaoda]

ok allora trasferisco la mia domanda nella sezione Javascript !!!
Grazie mille !!!!

[dani_ajl]

Anche io ho provato a fare la rotazione xo ho riscontrato un problema

Nel momento in cui ruoti in img di 90/180 gradi l'immagine rimane nitida. Con qualsiasi altro grado di inclinazione l'img si sfoca un po'. E' normale?

[ldetomi]

...e direi proprio di sì!!!
I pixel sono dei quadratini che formano i puntini dell'immagine. Il file è formato da tanti quadratini e lo schermo che visualizza, anche.... un quadratino è sempre a tinta unita ovviamente, essendo l'unità di misura fondamentale!!!

Se un'immagine viene ruotata di 90 gradi (e multipli) in pratica ruoti i suoi quadratini dello stesso angolo, e un quadrato rosso ruotato di 90 gradi... è sempre un quadrato rosso!!

Se invece ruoti di un angolo libero, la nuova immagine deve essere ri-divisa in tanti quadratini per poter essere visualizzata a schermo, ma ora non hai più corrispondenza 1:1 tra quelli del file e quelli dello schermo, quindi sfuoca, sgrana, ecc... in generale si creano artefatti!!!

[dani_ajl]

Hai ragione..non ci avevo pensato..
Quindi è meglio usare il classico rollover javascript (che alla fine fa lo stesso effetto)

[ldetomi]

Non so bene cosa vuoi dire... se intendi creare l'immagine ruotata in photoshop e poi con javascript caricare una o l'altra a seconda dell'hover del mouse.... ti direì di sì perché un programma di grafica comunque usa algoritmi più sofisticati che minimizzano gli artefatti.... ma ti direi anche che per questo effetto, puoi fare tutto in css, non serve JS.