Cross browser way per ruotare l'immagine usando i CSS?

Ho un layout del sito su cui sto lavorando che ha un'area di contenuto principale e quindi in ciascuno dei quattro angoli dell'area del contenuto si trova un angolo grafico. L'effetto complessivo di è quello di un desk blotter.Cross browser way per ruotare l'immagine usando i CSS?

Ecco il codice per il mio alto a sinistra:

.corner-top-left { width:96px ; 
height:96px ; 
background:url("images/corner.png") no-repeat ; 
position:absolute ; 
top:-5px ; 
left:-5px ; 
z-index:3000 ; 
}

Invece di fare quattro immagini angolari individuali, ciò che vorrei fare (se possibile) è utilizzare l'immagine originale (corner.png) e ruotarlo usando il CSS.

Esiste un modo compatibile con più browser per eseguire questa operazione?

Grazie mille!

fonte

2012-08-06 Cynthia

Una ricerca Google avrebbe dato la risposta: http: // risposte .oreilly.com/topic/1004-how-to-ruate-an-image-with-css/ – xbonez

Ho cercato per la prima volta su google. Quel collegamento non compariva da nessuna parte nelle prime 10 * pagine * dei risultati che ho guardato attraverso (il termine di ricerca era 'css ruotare l'immagine di sfondo'). Dal momento che molti degli esempi che ho visto * non erano compatibili con i browser, sono venuto qui. Comunque per il collegamento. – Cynthia

Faresti meglio a usare 4 immagini diverse in quanto le trasformazioni CSS non funzioneranno in IE 7 e IE 8. –

http://jsfiddle.net/tJkgP/2/

CSS per ruotare di 45 gradi:

.desk 
{ 
    width: 50%; 
    height: 400px; 
    margin: 5em auto; 
    border: solid 1px #000; 
    overflow: visible; 
} 
.desk img 
{ 
    behavior:url(-ms-transform.htc); 
    /* Firefox */ 
    -moz-transform:rotate(45deg); 
    /* Safari and Chrome */ 
    -webkit-transform:rotate(45deg); 
    /* Opera */ 
    -o-transform:rotate(45deg); 
    /* IE9 */ 
    -ms-transform:rotate(45deg); 
    /* IE6,IE7 */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); 
    /* IE8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; 

}

IE6-8 CSS è venuto da qui: CSS rotate property in IE

fonte

2012-08-06 16:46:15

Funzionerà alla grande con le immagini che non contengono elementi trasparenti! Grazie :) Faccio quella distinzione solo perché ho controllato il jfiddle in IE8 e stava giocando all'inferno con l'ombra e la trasparenza. Questo è IE per te però. Grazie ancora! – Cynthia

Questo è esattamente il motivo per cui CSS fa schifo. La mancanza di standard è lo standard. – janek37

@ janek37 manca e in questo caso esplicitamente non esiste uno standard. Sarebbe bello avere uno standard 'ruotare (45 gradi);' come un banner per tutti quelli specifici del browser. – 23inhouse

Cross browser way per ruotare l'immagine usando i CSS?

risposta

Problemi correlati