第CSS實(shí)現(xiàn)五種常用的2D轉(zhuǎn)換CSS中的2D轉(zhuǎn)換允許我們?cè)诙S空間中執(zhí)行一些基本的變換操作，例如移動(dòng)、旋轉(zhuǎn)、縮放或扭曲等，變換后的元素與絕對(duì)定位的元素類(lèi)似，不會(huì)影響周?chē)脑?，但可以和周?chē)脑刂丿B，不同的是，轉(zhuǎn)換后的元素在頁(yè)面中任然會(huì)占用為轉(zhuǎn)換之前的空間。

借助CSS中的transform屬性以及下列轉(zhuǎn)換函數(shù)就可以實(shí)現(xiàn)2D轉(zhuǎn)換：

matrix()：以一個(gè)包含六個(gè)值（a,b,c,d,e,f）的變換矩陣的形式指定一個(gè)2D變換，相當(dāng)于直接應(yīng)用一個(gè)[a,b,c,d,e,f]的變換矩陣；

translate()：將對(duì)象沿X軸和Y軸平移，該函數(shù)需要提供1~2個(gè)參數(shù)，第一個(gè)參數(shù)對(duì)應(yīng)X軸，第二個(gè)參數(shù)對(duì)應(yīng)Y軸，如果未提供第二個(gè)參數(shù)，則默認(rèn)值為0；

translatex()：將對(duì)象沿X軸（水平方向）的平移；

translatey()：將對(duì)象沿Y軸（垂直方向）的平移；

rotate()：旋轉(zhuǎn)指定對(duì)象，在函數(shù)的參數(shù)中可以指定旋轉(zhuǎn)的角度；

scale()：將對(duì)象進(jìn)行縮放，該函數(shù)需要提供1~2個(gè)參數(shù)，第一個(gè)參數(shù)對(duì)應(yīng)X軸，第二個(gè)參數(shù)對(duì)應(yīng)Y軸，如果未提供第二個(gè)參數(shù)，則默認(rèn)取第一個(gè)參數(shù)的值；

scalex()：將對(duì)象進(jìn)行縮放（改變?cè)氐膶挾龋?/p>

scaley()：將對(duì)象進(jìn)行縮放（改變?cè)氐母叨龋?/p>

skew()：將對(duì)象沿X軸和Y軸方向進(jìn)行傾斜扭曲，該函數(shù)需要提供1~2個(gè)參數(shù)，第一個(gè)參數(shù)對(duì)應(yīng)X軸，第二個(gè)參數(shù)對(duì)應(yīng)Y軸。如果未提供第二個(gè)參數(shù)，則默認(rèn)值為0；

skewx()：將對(duì)象沿X軸的（水平方向）扭曲；

skewy()：將對(duì)象沿Y軸的（垂直方向）扭曲。

1.translate()

translate()函數(shù)用來(lái)根據(jù)指定的參數(shù)將元素沿水平（X軸）或垂直（Y軸）方向移動(dòng)，函數(shù)的語(yǔ)法格式如下：

translate(tx,ty)

其中tx對(duì)應(yīng)元素在水平（X軸）方向的移動(dòng)距離，ty對(duì)應(yīng)元素在垂直（Y軸）方向的移動(dòng)距離，參數(shù)ty可以忽略（默認(rèn)為0），兩個(gè)參數(shù)均可以為負(fù)值。

【示例】使用translate()函數(shù)來(lái)移動(dòng)指定的元素：

!DOCTYPEhtml

html

head

style

div{

width:100px;

height:100px;

background-color:#CCC;

transform:translate(100px,10px);

/style

/head

body

div/div

/body

/html

運(yùn)行結(jié)果如下圖所示：

圖：translate()函數(shù)演示

如果只是將元素水平移動(dòng)或者只是將元素垂直移動(dòng)，也可以使用translateX()（將元素水平移動(dòng)）或translateY()（將元素垂直移動(dòng)），translateX()和translateY()函數(shù)均只需要提供一個(gè)參數(shù)即可，例如：

translateX(100px);/*等同于translate(100px,0px);*/

translateY(10px);/*等同于translate(0px,10px);*/

2.rotate()

rotate()函數(shù)用來(lái)按照給定的角度來(lái)旋轉(zhuǎn)元素，函數(shù)的語(yǔ)法格式如下：

rotate(a)

其中參數(shù)a表示元素要旋轉(zhuǎn)的角度，若a為正值則表示順時(shí)針旋轉(zhuǎn)，若a為負(fù)值則表示逆時(shí)針旋轉(zhuǎn)。

【示例】使用rotate()函數(shù)來(lái)旋轉(zhuǎn)元素：

!DOCTYPEhtml

html

head

style

div{

width:100px;

height:100px;

background-color:#CCC;

margin:20px0px0px20px;

transform:rotate(45deg);

/style

/head

body

div/div

/body

/html

運(yùn)行結(jié)果如下圖所示：

圖：rotate()函數(shù)演示

3.scale()

scale()函數(shù)用來(lái)縮放（放大或縮?。┲付ǖ脑?，函數(shù)的語(yǔ)法格式如下：

scale(sx,sy)

其中sx表示水平方向的縮放比例，sy表示垂直方向的縮放比例。另外，參數(shù)sy可以省略，它的默認(rèn)值等于sx。

【示例】使用scale()函數(shù)縮放指定元素：

!DOCTYPEhtml

html

head

style

div{

width:100px;

height:100px;

background-color:#CCC;

transform:scale(0.7);

/style

/head

body

div/div

/body

/html

運(yùn)行結(jié)果如下圖所示：

圖：scale()函數(shù)演示

提示：當(dāng)scale()中，給定的參數(shù)值在-1~1范圍之外時(shí)，元素將被放大；當(dāng)在參數(shù)值在-1~1范圍之內(nèi)時(shí)，元素將被縮小。

與translate()函數(shù)類(lèi)似，如果是僅在水平方向或者僅在垂直方向上縮放元素大小，也可以使用scaleX()（在水平方向縮放元素）和scaleY()（在垂直方向縮放元素）函數(shù)。scaleX()和scaleY()函數(shù)僅需要提供一個(gè)參數(shù)即可，例如：

scaleX(0.5);/*等同于scale(0.5,1);*/

scaleY(0.5);/*等同于scale(1,0.5);*/

4.skew()

skew()函數(shù)用來(lái)將元素沿水平方向（X軸）和垂直方向（Y軸）傾斜扭曲，函數(shù)的語(yǔ)法格式如下：

skew(ax,ay)

其中，參數(shù)ax表示元素水平方向的扭曲角度，參數(shù)ay表示元素垂直方向的扭曲角度。另外，參數(shù)ay可以省略，若省略參數(shù)ay，則其默認(rèn)值為0。

【示例】使用skew()函數(shù)來(lái)扭曲指定元素：

!DOCTYPEhtml

html

head

style

div{

width:100px;

height:100px;

background-color:#CCC;

margin:20px0px0px10px;

transform:skew(-15deg,20deg);

/style

/head

body

div/div

/body

/html

運(yùn)行結(jié)果如下圖所示：

圖：skew()函數(shù)演示

另外，如果是僅在水平方向或者僅在垂直方向上對(duì)元素進(jìn)行扭曲，也可以使用skewX()（在水平方向縮放元素）和skewY()（在垂直方向縮放元素）函數(shù)來(lái)完成。skewX()和skewY()函數(shù)僅需要提供一個(gè)參數(shù)即可，例如：

skewX(15deg);/*等同于skew(15deg,0deg);*/

skewY(15deg);/*等同于skew(0deg,15deg);*/

5.matrix()

matrix()函數(shù)可以看作是skew()、scale()、rotate()和translate()幾個(gè)函數(shù)的縮寫(xiě)形式，通過(guò)matrix()函數(shù)可以同時(shí)定義所有2D轉(zhuǎn)換操作，函數(shù)的語(yǔ)法格式如下：

matrix(a,b,c,d,tx,ty)

matrix()函數(shù)中的6個(gè)參數(shù)分別對(duì)應(yīng)scaleX()、skewY()、skewX()、scaleY()、translateX()、translateY()幾個(gè)函數(shù)，您可以使用matrix()來(lái)實(shí)現(xiàn)各種2D轉(zhuǎn)換操作，例如：

translate(tx,ty)=matrix(1,0,0,1,tx,ty);：其中tx和ty是水平和垂直平移值；

rotate(a)=matrix(cos(a),sin(a),-sin(a),cos(a),0,0);：其中，a是度數(shù)的值。您可以交換sin(a)和-sin(a)值來(lái)進(jìn)行反向旋轉(zhuǎn)；

scale(sx,sy)=matrix(sx,0,0,sy,0,0);：其中sx和sy是水平和垂直縮放比例值；

skew(ax,ay)=matrix(1,tan(ay),tan(ay),1,0,0);：其中ax和ay是以deg為單位的水平和垂直值。

【示例】使用matrix()函數(shù)對(duì)元素進(jìn)行2D轉(zhuǎn)換操作：

!DOCTYPEhtml

html

head

style

div{

width:100px;

height:100px;

background-color:#CCC;

margin:20px0px0px10px;

float:left;

.one{

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

.two{

margin-left:35px;

transform:matrix(0.586,0.8,-0.8,0.686,0,0);

.three{

margin-left: