本篇文章為大家展示了CSS中怎么實(shí)現(xiàn)旋轉(zhuǎn)與翻轉(zhuǎn)，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司專(zhuān)注于網(wǎng)站建設(shè)|網(wǎng)站維護(hù)公司|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計(jì)與制作經(jīng)驗(yàn)，為許多企業(yè)提供了網(wǎng)站定制設(shè)計(jì)服務(wù)，案例作品覆蓋木制涼亭等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷(xiāo)售的產(chǎn)品，結(jié)合品牌形象的塑造，量身開(kāi)發(fā)品質(zhì)網(wǎng)站。

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

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

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

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

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

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

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

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

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

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

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

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

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

這樣就齊全了

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

代碼如下:

-moz-transform:scale(-1，1);
-webkit-transform:scale(-1，1);
-o-transform:scale(-1，1);
transform:scale(-1，1);
filter:FlipH;

2、垂直翻轉(zhuǎn)

代碼如下:

-moz-transform:scale(1，-1);
-webkit-transform:scale(1，-1);
-o-transform:scale(1，-1);
transform:scale(1，-1);
filter:FlipV;

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

代碼如下:

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

上述內(nèi)容就是CSS中怎么實(shí)現(xiàn)旋轉(zhuǎn)與翻轉(zhuǎn)，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：CSS中怎么實(shí)現(xiàn)旋轉(zhuǎn)與翻轉(zhuǎn)-創(chuàng)新互聯(lián)
瀏覽地址：http://chinadenli.net/article30/dgghpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、小程序開(kāi)發(fā)、企業(yè)建站、全網(wǎng)營(yíng)銷(xiāo)推廣、響應(yīng)式網(wǎng)站、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)