一個項(xiàng)目中要畫一個圖，有橫坐標(biāo)和縱坐標(biāo)，縱坐標(biāo)需要文字轉(zhuǎn)過來豎排，baidu了一圈，找到一篇文章，有用，轉(zhuǎn)載過來備查

css 2.0還是沒有翻轉(zhuǎn)的，3.0里面有rotate屬性，這個可以把元素進(jìn)行任意角度旋轉(zhuǎn)，灰常強(qiáng)大。除了這個rotate，還有一個scale，一般用法格式是

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

括弧里面（1，1）前者表示X軸，后者表示Y軸，當(dāng)數(shù)字大于1時放大，大于0并小于1時縮小，很好理解，那么負(fù)數(shù)是怎樣的效果？答案是 翻轉(zhuǎn) 。

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

表示水平翻轉(zhuǎn)；

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

表示垂直翻轉(zhuǎn)。

不過這些都是moz或者webkit的，萬惡的IE怎么辦?
于是我們想到濾鏡，濾鏡里面有這么一堆東西：

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

有沒有想問“rotation=4”什么效果? 面壁去...90、180、270都出來了，還要rotation=4實(shí)現(xiàn)360干嘛，感覺這個很費(fèi)呢。不過這個是靜態(tài)費(fèi)，如果動態(tài)的話，這個就是必須的了。假如用js控制元素旋轉(zhuǎn)，從0順時針旋到270的時候，如果沒有360的話，那么270會快速的逆時針回到0，這樣就2了，所以要給個360過渡，讓270自然到360，然后再循環(huán)，這樣就流暢了……

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

不過這樣也只是實(shí)現(xiàn)了“旋轉(zhuǎn)”，還有“翻轉(zhuǎn)”沒實(shí)現(xiàn)。IE的翻轉(zhuǎn)就需要用到這個：

水平翻轉(zhuǎn)：filter:FlipH;
垂直翻轉(zhuǎn)：filter:FlipV;

這樣就齊全了

具體代碼：
1、水平翻轉(zhuǎn)


2、垂直翻轉(zhuǎn)


3、順時針旋轉(zhuǎn)90度

最新評論