CSS旋轉與翻轉

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;

這樣就齊全了，不過是否還有疑問，為什麼要寫這《css旋轉與翻轉》，有何實戰意義沒?

雖然我還沒有在實際的專案應用到，不過我有這麼乙個想法，一般**都有對稱性按鈕，背景之類的元素，我們一般處理方式就是逐個切出加以定位，但是如果運用旋轉翻轉的話，那麼就只需要切乙份，其它如果有如90旋轉，水平翻轉，垂直翻轉的的話，那麼就用css來寫，這樣就用css代替了ps的操作，節省了多餘，提高網速。

具體**：

1、水平翻轉

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

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

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

transform:scale(-1，1);

filter:fliph;

2、垂直翻轉

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

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

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

transform:scale(1，-1);

filter:flipv;

3、順時針旋轉90度

-moz-transform:rotate(90deg);

-webkit-transform:rotate(90deg);

-o-transform:rotate(90deg);

transform:rotate(90deg);

filter:progid:dximagetransform.microsoft.basicimage(rotation=1);

CSS旋轉與翻轉

CSS旋轉與翻轉

css實現元素翻轉（不是旋轉）

numpy矩陣的旋轉與翻轉

CSS旋轉與翻轉

CSS旋轉與翻轉

css實現元素翻轉（不是旋轉）

numpy矩陣的旋轉與翻轉

相關推薦