CSS3之變換Transform

　　CSS3中還有很多屬性值得學習和使用的，比如Transform。Transform從翻譯字面上的意思就是改變和變形的意思。Transform的屬性值分為：移動translate、縮放scale、旋轉rotate、扭曲skew和矩陣變形matrix。下面就一起看看有關Transform的介紹吧。以下執行個體請在Google下看喲。

　　一、Transform的文法

　　對象選取器 {transform: rotate(旋轉) | scale(縮放) | skew(扭曲) | translate(移動) | none(不變形);}

　　註：box-shadow可以使用一個或多個投影，如果使用多個投影時必須需要用逗號“,”分開。

　　

　　

　　rotate(+deg) ：通過指定的角度參數對原元素指定一個2D rotation(2D 旋轉)，需先有transform-origin屬性的定義。transform-origin定義的是旋轉的基點，其中angle是指旋轉角度，如果設定的值為正數表示順時針旋轉，如果設定的值為負數，則表示逆時針旋轉。如：transform:rotate(30deg).

　　CSS代碼：

div {width:100px;height:100px;border:1px solid #000;position:absolute;top:50px;left:50px;}.c,.b {left:200px;}.c {background:red;-webkit-transform:rotate(30deg);}

　　HTML代碼：

<div class="a">原位置</div><div class="b">原位置</div><div class="c">旋轉30度</div>

　　預覽效果：

　　

　　移動translate我們有三種情況：translate(x,y)水平方向和垂直方向同時移動(也就是X軸和Y軸同時移動);translateX(x)僅水平方向移動(X軸移動);translateY(Y)僅垂直方向移動(Y軸移動)，具體使用方法如下：

　　 ：通過向量[tx, ty]指定一個2D translation，tx 是第一個過渡值參數，ty 是第二個過渡值參數選項。如果未被提供，則ty以 0 作為其值。也就是translate(x,y),它表示對象進行平移，按照設定的x,y參數值,當值為負數時，反方向移動物體，其基點預設為元素中心點，也可以根據transform-origin進行改變基點。如transform:translate(30px,30px)。

　　CSS代碼：

div {width:100px;height:100px;border:1px solid #000;position:absolute;top:50px;left:50px;}.c,.b {left:200px;}.c {background:red;-webkit-transform:translate(30px,30px);}

　　HTML代碼：

<div class="a">原位置</div><div class="b">原位置</div><div class="c">位移(30px,30px)</div>

　　預覽效果：

　　 ： 通過給定一個X方向上的數目指定一個移動的值。只向x軸進行移動元素，同樣其基點是元素中心點，也可以根據transform-origin改變基點位置。如：transform:translateX(30px)。

　　CSS代碼：

div {width:100px;height:100px;border:1px solid #000;position:absolute;top:50px;left:50px;}.c,.b {left:200px;}.c {background:red;-webkit-transform:translateX(30px);}

　　HTML代碼：

<div class="a">原位置</div><div class="b">原位置</div><div class="c">位移(30px,0)</div>

　　預覽效果：

　　 ：通過給定Y方向的數目指定一個translation。只向Y軸進行移動，基點在元素心點，可以通過transform-origin改變基點位置。如：transform:translateY(30px)。

　　CSS代碼：

div {width:100px;height:100px;border:1px solid #000;position:absolute;top:50px;left:50px;}.c,.b {left:200px;}.c {background:red;-webkit-transform:translateY(30px);}

　　HTML代碼：

<div class="a">原位置</div><div class="b">原位置</div><div class="c">位移(0, 30px)</div>

　　預覽效果：

　　

　　縮放scale和移動translate是極其相似，他也具有三種情況：scale(x,y)使元素水平方向和垂直方向同時縮放(也就是X軸和Y軸同時縮放);scaleX(x)元素僅水平方向縮放(X軸縮放);scaleY(y)元素僅垂直方向縮放(Y軸縮放)，但它們具有相同的縮放中心點和基數，其中心點就是元素的中心位置，縮放基數為1，如果其值大於1元素就放大，反之其值小於1，元素縮小。下面我們具體來看看這三種情況具體使用方法：

　　：提供執行[sx,sy]縮放向量的兩個參數指定一個2D scale(2D縮放)。如果第二個參數未提供，則取與第一個參數一樣的值。scale(X,Y)是用於對元素進行縮放，可以通過transform-origin對元素的基點進行設定，同樣基點在元素中心位置;基中X表示水平方向縮放的倍數，Y表示垂直方向的縮放倍數，而Y是一個選擇性參數，如果沒有設定Y值，則表示X，Y兩個方向的縮放倍數是一樣的。並以X為準。如：transform:scale(2,1.5)。

　　CSS代碼：

div {width:100px;height:100px;border:1px solid #000;position:absolute;top:50px;left:50px;}.c,.b {left:200px;}.c {background:red;-webkit-transform:scale(0.5, 0.5);}/*或者.c {background:red;-webkit-transform:scale(0.5);}*/

　　HTML代碼：

<div class="a">原位置</div><div class="b">原位置</div><div class="c">縮放(0.5, 0.5)</div>

　　預覽效果：

　　 ： 使用 [sx,1] 縮放向量執行縮放操作，sx為所需參數。scaleX表示元素只在X軸(水平方向)縮放元素，他的預設值是(1,1)，其基點一樣是在元素的中心位置，我們同樣是通過transform-origin來改變元素的基點。如：transform:scaleX(2)。

　　CSS代碼：

div {width:100px;height:100px;border:1px solid #000;position:absolute;top:50px;left:50px;}.c,.b {left:200px;}.c {background:red;-webkit-transform:scaleX(0.5);}

　　HTML代碼：

<div class="a">原位置</div><div class="b">原位置</div><div class="c">縮放(0.5, 0)</div>

　　預覽效果：

　　 ： 使用 [1,sy] 縮放向量執行縮放操作，sy為所需參數。scaleY表示元素只在Y軸(垂直方向)縮放元素，其基點同樣是在元素中心位置，可以通過transform-origin來改變元素的基點。如transform:scaleY(2)。

　　CSS代碼：

div {width:100px;height:100px;border:1px solid #000;position:absolute;top:50px;left:50px;}.c,.b {left:200px;}.c {background:red;-webkit-transform:scaleY(0.5);}

　　HTML代碼：

<div class="a">原位置</div><div class="b">原位置</div><div class="c">縮放(0, 0.5)</div>

　　預覽效果：

　　4、扭曲skew

　　扭曲skew和translate、scale一樣同樣具有三種情況：skew(x,y)使元素在水平和垂直方向同時扭曲(X軸和Y軸同時按一定的角度值進行扭曲變形);skewX(x)僅使元素在水平方向扭曲變形(X軸扭曲變形);skewY(y)僅使元素在垂直方向扭曲變形(Y軸扭曲變形)，具體使用如下：

　　：X軸Y軸上的skew transformation(斜切變換)。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則值為0，也就是Y軸方向上無斜切。skew是用來對元素進行扭曲變行，第一個參數是水平方向扭曲角度，第二個參數是垂直方向扭曲角度。其中第二個參數是選擇性參數，如果沒有設定第二個參數，那麼Y軸為0deg。同樣是以元素中心為基點，我們也可以通過transform-origin來改變元素的基點位置。如：transform:skew(30deg30deg)。

　　CSS代碼：

div {width:100px;height:100px;border:1px solid #000;position:absolute;top:50px;left:50px;}.c,.b {left:200px;}.c {background:red;-webkit-transform:skew(30deg, 30deg);}

　　HTML代碼：

<div class="a">原位置</div><div class="b">原位置</div><div class="c">扭曲(30deg, 30deg)</div>

　　預覽效果：

　　 ： 按給定的角度沿X軸指定一個skew transformation(斜切變換)。skewX是使元素以其中心為基點，並在水平方向(X軸)進行扭曲變行，同樣可以通過transform-origin來改變元素的基點。如：transform:skewX(30deg)。

　　CSS代碼：

div {width:100px;height:100px;border:1px solid #000;position:absolute;top:50px;left:50px;}.c,.b {left:200px;}.c {background:red;-webkit-transform:skewX(30deg);}

　　HTML代碼：

<div class="a">原位置</div><div class="b">原位置</div><div class="c">扭曲(30deg, 0)</div>

　　預覽效果：

　　： 按給定的角度沿Y軸指定一個skew transformation(斜切變換)。skewY是用來設定元素以其中心為基點並按給定的角度在垂直方向(Y軸)扭曲變形。同樣我們可以通過transform-origin來改變元素的基點。如：transform:skewY(10deg)。

　　CSS代碼：

div {width:100px;height:100px;border:1px solid #000;position:absolute;top:50px;left:50px;}.c,.b {left:200px;}.c {background:red;-webkit-transform:skewY(30deg);}

　　HTML代碼：

<div class="a">原位置</div><div class="b">原位置</div><div class="c">扭曲(0, 30deg)</div>

　　預覽效果：

　　

　　

　　

-moz-transform: rotate | scale | skew | translate ;

　　

-webkit-transform: rotate | scale | skew | translate ;

　　

-o-transform: rotate | scale | skew | translate ;

　　

-ms-transform: rotate | scale | skew | translate ;

　　

transform: rotate | scale | skew | translate ;

　　2、Transform相容IE6-8

filter:progid:DXImageTransform.Microsoft.Matrix(M11=FM11,M12=FM12,M21=FM21,M22=FM22,SizingMethod='auto expand'); 

　　

　　現在我們介紹一下改變元素基點的方法，那就是transform-origin.這個也是屬於CSS3新加的功能，伴隨著transform的屬性而來的。他的主要作用就是讓我們在進行transform動作之前可以改變元素的基點位置，因為我們元素預設基點就是其中心位置，換句話說我們沒有使用transform-origin改變元素基點位置的情況下，transform進行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置進行變化的。但有時候我們需要在不同的位置對元素進行這些操作，那麼我們就可以使用transform-origin來對元素進行基點位置改變，使元素基點不在是中心位置，以達到你需要的基點位置。

　　1、transform-origin的文法

　　transform-origin(X,Y):預設點是元素的中心點。其中X和Y的值可以是百分值,em,px，其中X也可以是字元參數值left,center,right;Y和X一樣除了百分值外還可以設定字元值top,center,bottom，這個看上去有點像我們background-position設定一樣;下面我列出他們相對應的寫法：

　　(1)top left | left top 等價於 0 0 | 0% 0%

　　(2)top | top center | center top 等價於 50% 0

　　(3)right top | top right 等價於 100% 0

　　(4)left | left center | center left 等價於 0 50% | 0% 50%

　　(5)center | center center 等價於 50% 50%(預設值)

　　(6)right | right center | center right 等價於 100% 50%

　　(7)bottom left | left bottom 等價於 0 100% | 0% 100%

　　(8)bottom | bottom center | center bottom 等價於 50% 100%

　　(9)bottom right | right bottom 等價於 100% 100%

　　其中 left,center right是水平方向取值，對應的百分值為left=0%;center=50%;right=100%而top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取一個值，表示垂直方向值不變。

　　

　　

　　CSS代碼：

div {width:100px;height:100px;border:1px solid #000;position:absolute;top:50px;left:50px;}.c,.b {left:200px;}.c {background:red;-webkit-transform:rotate(30deg);-webkit-transform-origin:left top;}

　　HTML代碼：

<div class="a">原位置</div><div class="b">原位置</div><div class="c">旋轉30度,基點在元素(0, 0)</div>

　　預覽效果：

　　

　　CSS代碼：

div {width:100px;height:100px;border:1px solid #000;position:absolute;top:50px;left:50px;}.c,.b {left:200px;}.c {background:red;-webkit-transform:rotate(30deg);-webkit-transform-origin:right;}

　　HTML代碼：

<div class="a">原位置</div><div class="b">原位置</div><div class="c">旋轉30度,基點在元素(100, 50)</div>

　　預覽效果：

　　

　　CSS代碼：

div {width:100px;height:100px;border:1px solid #000;position:absolute;top:50px;left:50px;}.c,.b {left:200px;}.c {background:red;-webkit-transform:rotate(30deg);-webkit-transform-origin:25% 75%;}

　　HTML代碼：

<div class="a">原位置</div><div class="b">原位置</div><div class="c">旋轉30度,基點在元素(25%, 75%)</div>

　　預覽效果：

　　

　　

-moz-transform-origin: x y;

       

-webkit-transform-origin: x y;

　　

-o-transform-origin: x y ;

　　

-ms-transform-origin: x y;

　　

transform-origin: x y ;

　　CSS3之變換Transform的時候需要注意的是，多個變換的時候中間用空格隔開就好了，而且不分先後順序。CSS3之變換Transform就為大家介紹到這裡了，希望上面的東西能對大家有所協助。再用更多有關CSS3的小介紹，歡迎關注本站有關CSS3的更新。