跨瀏覽器的方式來使用CSS旋轉圖像？

我有一個網站佈局，我正在努力，有一個主要的內容區域，然後在內容區域的四個角落的每一個角落圖形。整體效果是桌面記事本的效果。跨瀏覽器的方式來使用CSS旋轉圖像？

這裏是我的左上角代碼：

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

而不是讓四個單項角的圖像，我願做（如果可能的話）是使用原始圖像（corner.png ）並使用 CSS旋轉它。

是否有跨瀏覽器兼容的方式來做到這一點？

非常感謝！

來源

2012-08-06 Cynthia

谷歌搜索會給你答案：HTTP：//答案.oreilly.com/topic/1004-how-to-rotate-an-image-with-css/ – xbonez 2012-08-06 16:20:54

我確實先搜索過谷歌。該鏈接沒有出現在我翻看的結果的頭10 *頁*中的任何地方（搜索詞是'css rotate background image'）。由於許多我看到的例子都不是跨瀏覽器兼容的，我來到了這裏。 Thx的鏈接雖然。 – Cynthia 2012-08-06 16:27:59

您最好使用4種不同的圖像，因爲CSS轉換在IE 7和IE 8中不起作用。 – 2012-08-06 16:37:16

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

CSS通過旋轉45度：

.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從這裏走過：CSS rotate property in IE

來源

2012-08-06 16:46:15

這對於在其中沒有透明元素的圖像非常有用！謝謝:)我只是因爲我在IE8中檢查了jfiddle，並且它正在玩陰影和透明度。儘管如此，這是IE瀏覽器。再次感謝！ – Cynthia 2012-08-06 16:54:46

這正是CSS糟糕的原因。標準缺乏標準。 – janek37 2013-09-02 14:02:59

@ janek37它缺乏，明確在這種情況下沒有標準。將標準的「旋轉（45deg）」作爲所有瀏覽器特定標題的橫幅是很好的。 – 23inhouse 2014-02-17 10:29:39

跨瀏覽器的方式來使用CSS旋轉圖像？

回答

相關問題