CSS旋轉與翻轉

2021-06-08 23:47:21 字數 2397 閱讀 2002

從別處看到的,

先記下來,方便以後檢視

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的操作,節省了多餘,提高網速。

以gotrip頁面來看:

橫豎版切換按鈕可以用旋轉90度來實現,從而節省2張;

首頁標題部分左右箭頭可以用180度旋轉或者垂直翻轉來實現,橫版的時候就用180度旋轉或者水平翻轉。

以**來看:

小選單的黑色小三角,可以用180度旋轉或者垂直翻轉來實現;

資訊提示,展示部分切換按鈕可以用180度旋轉或者水平翻轉。

具體**:

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 2.0還是沒有翻轉的,3.0裡面有rotate屬性,這個可以把元素進行任意角度旋轉,灰常強大。除了這個rotate,還有乙個scale,一般用法格式是 moz transform scale 1,1 括弧裡面 1,1 前者表示x軸,後者表示y軸,當數字大於1時放大,大於0並小於1時縮小,很好...

css實現元素翻轉(不是旋轉)

有時候我們要實現元素的垂直或者水平翻轉,尤其是的翻轉,兩張對稱的,可以用兩張來解決這個問題,那麼其他的元素呢?而且存兩張並不是上上策,如何用 實現呢?css3提供了transform屬性,實現方法如下 水平翻 transform scale 1,1 垂直翻 transform scale 1,1 那...

numpy矩陣的旋轉與翻轉

使用skimage.io讀出來的是numpy.darray格式,掌握numpy矩陣的旋轉與翻轉,可實現資料增廣 data augmentation import numpy as np mat np.array 1,3,5 2,4,6 7,8,9 print mat,orignal mat90 np...