如何在CSS中添加旋轉的圖像？

我寫下面的代碼。但現在要求圖像應旋轉180度。我怎樣才能做到這一點？如何在CSS中添加旋轉的圖像？

#cell { 
background-image: url("../images/logo.PNG"); 
background-attachment: fixed; 
background-repeat: no-repeat; 
background-position: 0px 250px; 
background-color: #FFFFFF; 
border-left: 2px; 
}

HTML標籤：

<td width="2%" id="cell"/>

來源

2012-01-20 user968880

你不能只是這樣做的圖像處理程序（GIMP，PHOTOSHOP等）來代替，或者你需要有原始圖像，因爲它是現在？ – Bojangles

http://stackoverflow.com/questions/1526448/rotating-an-image-using-css這可能會幫助你 –

如果你沒有在<td>任何文字可以在其上使用。如果你有文字，這也會旋轉文字。爲了防止你可以把<div>放在<td>的內部，把文本放在裏面，然後旋轉180度（再次使它直立）。

演示：http://jsfiddle.net/ThinkingStiff/jBHRH/

HTML：

<table> 
    <tr><td width="20%" id="cell"><div>right-side up<div></td></tr> 
</table>

CSS：

#cell { 
    background-image: url(http://thinkingstiff.com/images/matt.jpg); 
    background-repeat: no-repeat; 
    background-size: contain; 
    color: white; 
    height: 150px; 
    transform: rotate(180deg); 
    width: 100px; 
} 

#cell div { 
    transform: rotate(180deg);   
}

輸出：

enter image description here

來源

2012-01-20 09:35:15 ThinkingStiff

您可以使用CSS3這一點，但也有一些瀏覽器的問題：

transform: rotate(180deg);

也看這裏：CSS3 rotate alternative?

來源

2012-01-20 09:35:34

一個跨瀏覽器的解決方案是

#cell { 
    -webkit-transform: rotate(180deg);  /* Chrome and other webkit browsers */ 
    -moz-transform: rotate(180deg);  /* FF */ 
    -o-transform: rotate(180deg);   /* Opera */ 
    -ms-transform: rotate(180deg);   /* IE9 */ 
    transform: rotate(180deg);    /* W3C compliant browsers */ 

    /* IE8 and below */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand'); 
}

注意，對於IE8及以下，旋轉中心點不在圖像的中心（與所有其他瀏覽器一樣）。所以，對於IE8及以下版本，您需要使用負邊距（或填充）來將圖像向上和向左移動。

元素需要被阻止。可使用的其他單位有： 180deg = .5turn = 3.14159rad = 200grad

來源

2012-01-20 09:35:56

我明白爲什麼這些都是一樣的：180deg，.5turn和3.14159rad，但我不明白爲什麼200rad與其餘的一樣，任何人都可以解釋嗎？ – Kevkong

@Kevkong對不起，這是一個錯字。我的意思是'200grad'。感謝您指出這一點 –

哦，這不是我的意圖指出。我對此非常感興趣，但是一旦你寫下「畢業典禮」，我就會回憶起我的數學課回到學校，並且一點點的使用Google搜索回答了我的問題。 – Kevkong

您也可以嘗試這種軸向型的旋轉或旋轉的Z軸。

.box { 
 
    background: url('http://aashish.coolpage.biz/img/about/7.jpg'); 
 
    width: 200px; 
 
    height: 200px; 
 
    transition: transform .5s linear; 
 
    transform-style: preserve-3D; 
 
} 
 

 
.box:hover { 
 
    transform: rotateY(180deg); 
 
}

<div class="box"></div>

來源

2017-11-03 11:59:04 Aashish

如何在CSS中添加旋轉的圖像？

回答

相關問題