使用CSS從右向左旋轉圖像

Question

是否可以將圖像從右向左旋轉到純CSS的DIV中？我的意思是不使用任何JavaScript？

Answer 1

這是可能的使用CSS3的transform: rotate(...)或一些專有的IE過濾器。見an example或the specification。

例如

position:absolute; 
-moz-transform: rotate(90deg); 
-webkit-transform: rotate(90deg); 
-o-transform: rotate(90deg); /*opera*/ 
transform: rotate(90deg); /*likely future standard*/ 
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
/*for filter: 1==90deg, 2==180deg, 3==270deg*/ 

請注意，這種變換是一種渲染變換;所以旋轉不會影響佈局（類似於position: relative內容）。這就是爲什麼絕對定位往往是最簡單的途徑。另外，請注意規範不是最終的;細節可能會發生變化（特別是轉換與佈局的交互方式 - 遵循position:absolute;的另一個原因）。

最後，您可能對動畫過渡感興趣;作爲一個隨機搜索的例子，你可以看看here。這些還沒有最終確定，儘管部分在firefox，webkit和opera中實現：標準可能會堅持下去。不間斷動畫是蘋果公司的一項提案，目前僅在webkit中實現，並且比轉換複雜得多;除了技術演示之外，我會遠離這些標準，因爲標準可能會以複雜的方式發生變化。

Answer 2

問題是不清楚他是否在尋找靜態旋轉 - 即在固定角度的屏幕上顯示 - 或動畫旋轉;例如元素在屏幕上旋轉的位置。

對於靜態旋轉，@Eamon Nerbonne的回答是絕對正確的。 transform和filter樣式是你想要的。 （但是請注意，filter的語法是無效的CSS，在我的測試中可能會導致一些非IE瀏覽器忽略任何樣式，因此您可能需要小心）

如果您正在尋找一個動畫旋轉，它更難。在CSS規範中支持動畫，使用transition和transform樣式，但目前支持非常差。 Safari和Chrome應該可以做到這一點，但是你會爲其他任何事情而煩惱。

這裏是一個讓你開始的鏈接：http://webkit.org/blog/138/css-animation/