Cross-Browser-Möglichkeit, Bild mit CSS zu drehen?

Ich habe ein Website-Layout, das ich arbeite, die einen Hauptinhaltsbereich hat und dann an jeder der vier Ecken des Inhaltsbereichs sitzt eine Ecke Grafik. Der Gesamteffekt ist der eines Schreibtischblotters. HierCross-Browser-Möglichkeit, Bild mit CSS zu drehen?

ist der Code für meine linke obere Ecke:

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

Anstatt vier einzelne Ecke Bilder zu machen, was würde Ich mag tun (wenn möglich) ist das Originalbild verwenden (corner.png) und rotieren Sie es mit CSS.

Gibt es eine Cross-Browser-kompatible Möglichkeit, dies zu tun?

Vielen Dank!

Quelle

2012-08-06 Cynthia

Eine Google-Suche gegeben Sie Ihre Antwort haben würde: http: // Antworten .oreilly.com/topic/1004-how-to-rotate-ein-Bild-mit-css/ – xbonez

Ich habe Google zuerst suchen. Dieser Link erschien nirgendwo auf den ersten 10 * Seiten * der Ergebnisse, die ich durchging (der Suchbegriff war 'css route background image'). Da viele der Beispiele, die ich * gesehen habe *, nicht Cross-Browser-kompatibel waren, kam ich hierher. Thx für die Verbindung obwohl. – Cynthia

Sie sollten besser 4 verschiedene Bilder verwenden, da CSS-Transformationen in IE 7 und IE 8 nicht funktionieren. –

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

CSS um 45 Grad zu drehen:

.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 von hier kam: CSS rotate property in IE

Quelle

2012-08-06 16:46:15

Dies funktioniert hervorragend mit Bildern, die keine transparenten Elemente enthalten! Vielen Dank :) Ich mache diese Unterscheidung nur, weil ich die IEFE in IE8 überprüft habe und es die Hölle mit Schatten und Transparenz gespielt hat. Das ist IE für dich. Danke noch einmal! – Cynthia

Das ist genau, warum CSS saugt. Mangel an Standards ist der Standard. – janek37

@ Janek37 es fehlt und explizit in diesem Fall gibt es keinen Standard. Es wäre schön, einen Standard 'rotate (45deg);' als Banner für alle browserspezifischen zu haben. – 23inhouse

Cross-Browser-Möglichkeit, Bild mit CSS zu drehen?

Antwort

Verwandte Themen