前言
CSS3提供了2D轉(zhuǎn)換功能，能夠?qū)υ剡M(jìn)行移動(dòng)、縮放和轉(zhuǎn)動(dòng)等功能。
2D轉(zhuǎn)換的屬性名為transform，使用方法為transform:method(value)。
2D轉(zhuǎn)換方法有translate、scale、rotate、skew、matrix，還有基于這些分支出的translateX、scaleY等。
這里，我將會(huì)介紹到以下轉(zhuǎn)換方法：
首先，我們先插入一個(gè)簡(jiǎn)單的html代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Css3的2D轉(zhuǎn)換</title> <style type="text/css"> *{ margin:0; padding:0; } #picture{ width：100%; height:500px; background:#ccc; } img{ margin:100px 0 0 100px; } </style></head><body> <div id="picture"> <img src="mary.gif" alt="This is a picture" > </div> </body></html>這段代碼我們可以實(shí)現(xiàn)在一個(gè)div里放一張圖片，通過(guò)這張圖片以便于向大家介紹以下方法。
1.translate（）方法：這個(gè)方法里可以有兩個(gè)參數(shù)，中間用分號(hào)隔開，分別表示沿著X軸和Y軸移動(dòng)的距離，這個(gè)距離是相對(duì)于該圖片的移動(dòng)距離，且向右為X軸的正方向，向下為Y軸的正方向。下面的代碼表示將圖片向右移動(dòng)100px，向下也移動(dòng)100?！ ?/p>
img{ margin:100px 0 0 100px; transform:translate(100px,100px); }2.rotate()方法：這個(gè)方法里有一個(gè)參數(shù)，表示要旋轉(zhuǎn)的度數(shù)，正數(shù)表示順時(shí)針旋轉(zhuǎn)，那么負(fù)數(shù)就表示逆時(shí)針旋轉(zhuǎn)了。在要旋轉(zhuǎn)的度數(shù)后面添加deg （即degree，度數(shù)的意思）。以下代碼表示將圖片順時(shí)針旋轉(zhuǎn)50°。
img{ margin:100px 0 0 100px; transform:rotate(50deg);｝3.scale()方法：這個(gè)方法里有兩個(gè)參數(shù)，沒(méi)有單位。分別表示寬度和高度放大或縮小的倍數(shù)，如果大于1表示放大；如果小于一表示縮小。以下代碼表示將圖片的寬度和高度都放大兩倍。
img{ margin:100px 0 0 100px; transform:scale(2,2);}4.skew（）方法：有兩個(gè)參數(shù)，分別表示沿著X軸和Y軸傾斜轉(zhuǎn)換，單位同樣是deg，表示角度。這個(gè)方法不是很容易理解。首先給出下列代碼：
img{ margin:100px 0 0 100px; transform:skew(20deg,0deg);｝表示將圖片沿著x軸逆時(shí)針旋轉(zhuǎn)20度。
這是沒(méi)有使用skew（）方法的樣子
這是使用了skew（）方法之后的樣子。
為什么呢？這是因?yàn)槠鋢軸和Y軸的方向是這樣的：
當(dāng)x軸旋轉(zhuǎn)20°時(shí)會(huì)將圖片進(jìn)行逆時(shí)針旋轉(zhuǎn)，但是請(qǐng)注意：這里不是真正意義上的旋轉(zhuǎn)，而有拉伸傾斜的意思，旋轉(zhuǎn)之后，它的寬度并沒(méi)有改變，并且做一條垂線可以發(fā)現(xiàn)高也是沒(méi)有改變的。
對(duì)于Y軸方向的旋轉(zhuǎn)是一樣的：
img{ margin:100px 0 0 100px; transform:skew(0deg,20deg);｝上面的代碼表示將圖片沿著Y軸方向旋轉(zhuǎn)了20°。
旋轉(zhuǎn)之后，就是下面這樣了：它是沿著順時(shí)針?lè)较蛐D(zhuǎn)的。
如果，我們對(duì)x和y軸都旋轉(zhuǎn)呢？
img{ margin:100px 0 0 100px; transform:skew(20deg,20deg);｝那么最終就是綜合作用的效果了，如下圖所示：
說(shuō)了這么多，大家有沒(méi)有發(fā)現(xiàn)我們每次偏移，旋轉(zhuǎn)，傾斜，放大和縮小是相對(duì)于哪個(gè)點(diǎn)呢？
如果你稍微細(xì)心的話，就會(huì)發(fā)現(xiàn)是相對(duì)于中心點(diǎn)。這里就要用到tansform-origin屬性了。
即通過(guò)這個(gè)屬性，我們可以規(guī)定這些方法通過(guò)哪一個(gè)點(diǎn)作為原點(diǎn)。
首先舉幾個(gè)例子。
transform-origin：0 0；表示以左上角為原點(diǎn)。
transform-origin：100% 0；表示以右上角為原點(diǎn)
transform-origin：0 100%；表示以左下角為原點(diǎn)
transform-origin：100% 100%；表示以右下角為原點(diǎn)
于是我們可以得知，這些值的設(shè)定是以左上角為基點(diǎn)的，向右為x軸的正方向，向下為y軸的正方向。如果不設(shè)定這個(gè)屬性，那么默認(rèn)值為
transform-origin:50% 50%;即以中心作為變換的基點(diǎn)。
最后我還要說(shuō)一下瀏覽器兼容的問(wèn)題，為了使代碼能在各個(gè)瀏覽器運(yùn)行成功，我們需要在層疊樣式表中多加幾行代碼，比如說(shuō)rotate()方法：
transform: rotate(30deg);-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */-o-transform: rotate(30deg); /* Opera */-moz-transform: rotate(30deg); /* Firefox */
這樣，我們就可以在各個(gè)主要瀏覽器流暢運(yùn)行了！
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)各位學(xué)習(xí)或者使用CSS3能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。
新聞熱點(diǎn)
疑難解答
圖片精選
