CSS旋轉與翻轉使用示例詳解

      css 2.0仍是沒有翻轉的，3.0裏面有rotate屬性，這個能夠把元素進行任意角度旋轉，灰常強大，下面有個不錯的示例，你們能夠參考下

一個項目中要畫一個圖，有橫座標和縱座標，縱座標須要文字轉過來豎排，baidu了一圈，找到一篇文章，有用，轉載過來備查

css 2.0仍是沒有翻轉的，3.0裏面有rotate屬性，這個能夠把元素進行任意角度旋轉，灰常強大。除了這個rotate，還有一個scale，通常用法格式是

-moz-transform:scale(1，1);

括弧裏面（1，1）前者表示X軸，後者表示Y軸，當數字大於1時放大，大於0並小於1時縮小，很好理解，那麼負數是怎樣的效果？答案是 翻轉 。

-moz-transform:scale(-1，1);

表示水平翻轉；

-moz-transform:scale(1，-1);

表示垂直翻轉。

不過這些都是moz或者webkit的，萬惡的IE怎麼辦?
因而咱們想到濾鏡，濾鏡裏面有這麼一堆東西：

順時針旋轉圖片90度
picID.style.filter="progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
旋轉180度
picID.style.filter="progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
逆時針旋轉90度
picID.style.filter="progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";

有沒有想問「rotation=4」什麼效果? 面壁去...90、180、270都出來了，還要rotation=4實現360幹嗎，感受這個很費呢。不過這個是靜態費，若是動態的話，這個就是必須的了。假如用js控制元素旋轉，從0順時針旋到270的時候，若是沒有360的話，那麼270會快速的逆時針回到0，這樣就2了，因此要給個360過渡，讓270天然到360，而後再循環，這樣就流暢了……

這跟css3的rotate差很少，不過只能固定角度的旋轉，來個順時針15度就沒折了，css確實很輕鬆的transform：rotate(15deg);

不過這樣也只是實現了「旋轉」，還有「翻轉」沒實現。IE的翻轉就須要用到這個：

水平翻轉：filter:FlipH;
垂直翻轉：filter:FlipV;

這樣就齊全了

具體代碼：
一、水平翻轉-moz-transform:scale(-1，1);
-webkit-transform:scale(-1，1);
-o-transform:scale(-1，1);
transform:scale(-1，1);
filter:FlipH;

二、垂直翻轉
-moz-transform:scale(1，-1);
-webkit-transform:scale(1，-1);
-o-transform:scale(1，-1);
transform:scale(1，-1);
filter:FlipV;

三、順時針旋轉90度

-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);