CSS3 2D Transform

在 一個二維或三維空間，元素能夠被扭曲、移位或旋轉。只不過2D變形工做在X軸和Y軸，也就是你們常說的水平軸和垂直軸；而3D變形工做在X軸和Y軸以外， 還有一個Z軸。這些3D變換不只能夠定義元素的長度和寬度，還有深度。咱們將首先討論元素在2D平面如何變換，而後咱們在進入3D變換的討論。

CSS3 2D變換讓Web設計師有了更多的自由來裝飾和變形HTML組件。同時讓設計師有更多的功能裝飾文本和更多動畫選項來裝飾Div元素。在CSS3 2D變形中主要包含的一些基本功能以下。

位移translate()函數

你們不要誤會了，translate並非指翻譯外國語言，在這裏translate是一種方法，將元素向指定的方向移動，相似於position中的relative。能夠簡單的理解爲，使用translate()函數，你能夠把元素從原來的位置移動，而不影響在X、Y軸上任何組件。

translate()函數的使用語法以下：

translate(tx)

或者

translate(tx,ty)

translate()函數能夠取一個值tx，也能夠同時取兩個值tx和ty，其取值具體說明以下：

• tx是一個表明X軸（橫座標）移動的向量長度，當其值爲正值時，元素向X軸右方向移動，反之其值爲負值時，元素向X軸左方向移動。
• ty是一個表明Y軸（縱向標）移動的向量長度，當其值爲正值時，元素向Y軸下方向移動，反之其值爲負值時，元素向Y軸上方向移動。若是ty沒有顯式設置時，至關於ty=0。

結合起來，translate()函數移動元素主要有如下三種移動：

• 水平移動：向右移動translate(tx,0)和向左移動translate(-tx,0)；
• 垂直移動：向上移動translate(0,-ty)和向下移動translate(0,ty);
• 對角移動：右下角移動translate(tx,ty)、右上角移動translate(tx,-ty)、左上角移動translate(-tx,-ty)和左下角移動translate(-tx,ty)。

如今咱們來看一些有關於translate()函數的簡單例子。咱們使用transform:translate(tx,ty)將一個對象從其原始位置移動，其中tx值爲正值和ty值等於0時，對像向右移動：

HTML

<div> <img src="images/cardKingClub.png" alt="" width="70" height="100" /> <img src="images/cardKingClub.png" alt="" width="70" height="100" /> </div> 

CSS

div {
    width: 500px; height: 300px; margin: 30px auto; position: relative; background: url(images/bg-grid.jpg) no-repeat center center; background-size: 100% 100%; } //默認圖片都在容器中水平垂直居中 div img { position: absolute; top: 50%; left: 50%; margin-left: -35px; margin-top: -50px; } div img:nth-child(1){ opacity: .5; z-index: 1; } div img:nth-child(2){ opacity: 1; z-index: 2; transform: translate(100px,0); } 

效果以下圖所示：

在這個示例中，咱們讓撲克牌梅花King相對於原點中心位置向右移動100像素。若是僅需讓元素向右移動，咱們能夠省略ty值。換句話說ty值爲０時能夠省略不寫。如此一來，上面的效果等同與：

div img:nth-child(2){ opacity: 1; z-index: 2; transform: translate(100px); }

要將一個對象移動到左邊，咱們只須要輸入一個負數的X軸座標，而Y座標應保持０，基於前面的實例，咱們將撲克牌向左邊移動100像素：

div img:nth-child(2){ transform: translate(-100px,0); }

效果以下圖所示：

垂直移動一個對象很簡單，幾乎和水平移動對象相同。惟一的區別是，咱們將使用Y軸的值控制對象向上和向下移動位移量。正如咱們前面提到的，Y軸的坐 標值爲正值時，對像向下移動；反之其座標值爲負值時，對象向上移動。而X軸的座標值應該保持爲０。咱們來看一個簡單的實例，將一撲克牌向上，向下移動 100像素：

div img:nth-child(1){ opacity: .5; z-index: 1; } div img:nth-child(2){ z-index: 2; transform: translate(0,-100px); } div img:nth-child(3){ z-index: 3; transform: translate(0,100px); }

其效果以下圖所示：

要讓一個元素對角移動，我樣將結合X軸和Y軸兩座標的值。根據不一樣的方向，X軸和Y軸的值多是正值或是負值。若是咱們要將一張撲克牌向右上角移 動，須要將X軸座標設置爲正值，將Y軸從標設置爲負值；若是要將一張撲克牌向右下角移動，須要將X、Y軸座標設置爲正值；若是要將一張撲克牌向左上角移 動，須要將X、Y軸座標設置爲負值；若是要將撲克拍向左下角移動，須要將X座標設置爲負值，Y軸座標設置爲正值。

div img:nth-child(1){ opacity: .5; z-index: 1; } div img:nth-child(2){ z-index: 2; transform: translate(100px,-100px); } div img:nth-child(3){ z-index: 3; transform: translate(100px,100px); } div img:nth-child(4){ z-index: 3; transform: translate(-100px,-100px); } div img:nth-child(5){ z-index: 3; transform: translate(-100px,100px); }

其效果以下所示：

若是咱們要將對象沿着一個方向移動，好比說沿着水平軸或者縱軸移動，能夠實使用translate(tx,0)和translate(0,ty)來實現。其實在變形中還爲單獨一個方向移動對象提供了更簡單的方法：

• translateX()：水平方向移動一個對象。經過給定一個X軸方向的數值指定對象沿水平軸方向的位移。簡單點說，對像只向X軸進行移動，若是值爲正值，對像向右移動；若是值爲負值，對像向左移動。
• translateY()：縱軸方向移動一個對象。經過給定一個Y軸方向的數值指定對象沿縱軸方向的位移。簡單點說，對象只向Y軸進行移動，若是值爲正值，對象向下移動；若是值爲負值，對像向上移動。

這兩個函數和前面介紹的translate()函數不一樣的是每一個方法只接受一個值。因此，transform:translate(-100px,0)實際上等於transform:translateX(-100px);transform:translate(0,-100px)實際上等於transform:translateY(-100px)。

縮放scale()函數

縮放scale()函數讓元素根據中心原點對對象進行縮放。默認的值1。所以0.01到0.99之間的任何值，使一個元素縮小；而任何大於或等於1.01的值，讓元素顯得更大。

縮放scale()函數和translate()函數的語法很是類似，他能夠接受一個值，也能夠同時接受兩個值，若是隻有一個值時，其第二個值默認與第一個值相等。例如，scale(1,1)元素不會有任何變化，而scale(2,2)讓元素沿X軸和Y軸放大兩倍。其使用語法以下：

scale(sx)

或者：

scale(sx,sy)

其取值簡單說明以下：

• sx：用來指定橫向座標（X軸）方向的縮放向量，若是值爲0.01~0.99之間，會讓對象在X軸方向縮小，若是值大於或等於1.01，對象在X軸方向放大。
• sy：用來指定縱向座標（Y軸）方向的縮放量，若是值爲0.01~0.99之間，會讓對象在Y軸方向縮小，若是值大於或等於1.01，對象在Y軸方向放大。

這有一個簡單的實例：

HTML

<div> <img src="images/cardKingClub.png" alt="" width="70" height="100" /> <img src="images/cardKingClub.png" alt="" width="70" height="100" /> </div> 

CSS

div { width: 500px; height: 500px; margin: 30px auto; position: relative; background: url(images/bg-grid.jpg) no-repeat center center; background-size: 100% 100%; } div img { position: absolute; top: 50%; left: 50%; margin-left: -35px; margin-top: -50px; } div img:nth-child(1){ opacity: .8; z-index: 2; border: 1px solid red; } div img:nth-child(2){ z-index: 1; transform: scale(1.5); }

效果以下所示：

上面的例子將撲克牌放大了1.5倍或是實際尺寸的150%。由於咱們同時對X和Y軸方向方大，因此咱們只須要給scale()聲明一個值。你也可使用transform:scale(1.5,1.5)實現想相同的效果。

此外若是咱們要縮小一個元素，咱們會專門使用一個0~0.9999的值，像下面的例子，咱們將撲克牌縮放一半，也就是實際尺寸的50%。

div img:nth-child(2){ z-index: ２; transform: scale(.5); }

效果以下所示：

可是，要當心，若是你將值設置爲「0」時，元素將會消失。我想，若是不必，你是不會這樣作的。當咱們僅給scale() 函數只顯式設置一個值時，會使對象成正比例放大或縮小。若是須要將對象在X軸和Y軸兩個方向設置不一樣的值。

div img:nth-child(2){ z-index: 2; transform: scale(.5,1.2); }

效果以下所示：

scale()函數和translate()函數極其類似，除了能經過scale()函數使用元素水平方向和垂直方向同時縮放（也就是元素沿X軸和Y軸同時縮放）以外，也可使元素僅沿着X軸或Y軸方向縮放：

• scaleX()：至關於scale(sx,1)。表示元素只在X軸（水平方向）縮放元素，其默認值是1。
• scaleY()：至關於scale(1,sy)。表示元素只在Y軸（縱橫方向）縮放元素，其默認值是１。

經過上面的介紹，讓咱們不禁想起圖形編輯軟件中的縮放工具，對對象進行縮放效果。在CSS3中的scale()函數和圖形編輯軟件中的縮放工具幾乎相同：

在scale()函數中，取值除了能夠取正值以外，同時還能夠取負值。只不過取負值時，會先讓元素進行翻轉，而後在進行縮放。

HTML

<div class="wrapper"> <div>Scale(-1.5)</div> </div> 

CSS

.wrapper { width: 500px; height: 400px; margin: 30px auto; position: relative; background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center; } .wrapper > div { position: absolute; background-color: hsla(220,20%,20%,.3); top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; width: 198px; height: 198px; border: 1px dotted orange; text-align: center; line-height: 198px; color: #fff; font-size: 20px; transform: scale(-1.5); }

效果以下：

scale()函數對元素進行縮放時，都是以元素的中心爲基點，但能夠經過transform-origin來改變元素的基點。

旋轉rotate()函數

旋轉rotate()函數經過指定的角度參數對元素根據對象原點指定一個2D旋轉。它主要在二維空間內進行操做，接受一個角度值，用來指定旋轉的幅度。若是這個值爲正值，元素相對原點中心順時針旋轉；若是這個值爲負值，元素相對原點中心逆時針旋轉。

rotate()函數的使用很簡單，其基本語法以下：

rotate(a);

rotate()函數只接受一個值，其屬性值簡單說明以下：

• a：表明的是一個旋轉的角度值。其取值能夠是正的，也能夠是負的。若是取值爲正值時，元素默認之下相對元素中心點順時針旋轉；若是取值爲負值時，元素默認之下相對元素中心點逆時針旋轉。

接下來，咱們來看一個簡單的例子，撲克牌相對於元素中心點順時針旋轉45度：

HTML

<div> <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" /> <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" /> </div> 

CSS

div { width: 500px; height: 300px; margin: 30px auto; position: relative; background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center; } div img { position: absolute; top: 50%; left: 50%; margin-left: -70px; margin-top: -100px; } div img:nth-child(1){ z-index: １; opacity: .6; } div img:nth-child(2){ z-index: 2; transform: rotate(45deg); }

效果以下所示：

在默認之下，rotate()函數旋轉元素是相對於元素中心點進行旋轉，一樣，咱們能夠經過transform-origin屬性重置元素的旋轉原點：

div img:nth-child(2){ z-index: 2; transform-origin: top left; transform: rotate(45deg); }

基於上例，修改旋轉原點後的效果就徹底不一樣了：

rotate()函數也一樣能夠和圖形編輯軟件中的旋轉工具的功能對比起來理解。以下圖所示的是CSS3中rotate()函數在2D中的旋轉與Photoshop製做軟件中旋轉工具的對比：

傾斜skew()函數

傾斜skew()函數可以讓元素傾斜顯示。它能夠將一個對象以其中心位置圍繞着X軸和Y軸按照必定的角度傾斜。這與rotate()函數的旋轉不一樣，rotate()函數只是旋轉，而不會改變元素的形狀。skew()函數不會旋轉，而只會改變元素的形狀。語法格式以下：

skew(ax)

或者

skew(ax,ay)

其屬性值說明以下：

• ax：用來指定元素水平方向（X軸方向）傾斜的角度。
• ay：用來指定元素垂直方向（Y軸方向）傾斜的角度。若是未顯式的設置這個值，其默認爲０。

這裏有一個簡單的例子：

div img:nth-child(1){ z-index: １; opacity: .6; } div img:nth-child(2){ z-index: 2; transform: skew(30deg,10deg); }

效果以下圖所示：

傾斜skew()函數和CSS3中變形中的translate()、scale()函數同樣，除了可使用skew(tx,ty)函數讓元素相於元素中心爲原點在X軸和Y軸傾斜以外，還可使用skewX()和skewY()函數讓元素只在水平或垂直方向傾斜。

• skewX()：至關於skew(ax,0)和skew(ax)。按給定的角度沿X軸指定一個傾斜變形。skewX()使元素以其中心爲基點，並在水平方向（X軸）進行傾斜變形。
• skewY()：至關於skew(0,ay)。按給定的角度沿Y軸指定一個傾斜變形。skewY()用來設置元素以其中心爲基點並給定的角度在垂直方向（Y軸）傾斜變形。

在默認狀況之下，skew()函數都是以元素的原中心點對元素進行傾斜變形，可是咱們一樣能夠根據transform-origin屬性，從新設置元素基點對元素進行傾斜變形。另外，skew()函數和製圖軟件中的變形工具所起做用相似。

矩陣matrix()函數

CSS3中Transform讓咱們操做變形變得很簡單，諸如，位移translate()函數、縮放scale()函數、旋轉rotate()函數和傾斜skew()函數。這幾個函數很簡單，也很方便，可是變形中的矩陣函數matrix()對於咱們來講就不常使用了。

固然，Web設計師可使用rotate()、skew()、scale()和translate()函數來知足他們的變形須要，那咱們爲何要勞煩矩陣matrix()呢？在CSS3中的變形函數均可以使用matrix()函數來代替，例如：

使用矩陣能夠實現一個複雜的2D變形，以下：

#object { transform-origin: 0 0; transform: rotate(15deg) translateX(230px) scale(1.5, 2.6) skew(220deg, -150deg) translateX(230px) }

使用一個矩陣matrix()規則變成以下：

#object { transform-origin: 0 0; transform: matrix(1.06, 1.84, 0.54, 2.8, 466px, 482px) }

你也許很討厭matrix()函數中的一大堆數字，可是要整明白CSS3變形中的matrix()函數，咱們先要了解矩陣matrix是怎麼一回事。接下來咱們一塊兒探討一下transform中的matrix。

在CSS3中變形的matrix分爲兩種，一種是2D矩陣，另一種是3D矩陣。咱們就先從簡單的入手——2D矩陣matrix。

CSS3中的2D矩陣matrix總共提供了六個參數:a,b,c,d,e和f，其基本寫法以下：

matrix(a,b,c,d,e,f)

實際上，這六個參數，對應的矩陣就是：

在開始以前，首先來複習下一個簡單的線性代數知識：矩陣與向量乘法。太複雜的咱們用不到，咱們只須要了解三維向量與3 x 3矩陣的乘積：

弄明白3x3的矩陣以後，便可知道matrix計算方法。x和y是元素初始原點的座標，x’和y’則是經過矩陣變換後獲得的新原點座標。經過中間的 那個3x3的變換矩陣，對原先的座標施加變換，就能獲得新的座標了。依據矩陣變換規則便可獲得：x’=ax+cy+e和y’=bx+dy+f：

上面的一大堆的字母讓你看了犯迷糊，爲了讓人更好的理解，咱們一塊兒來看一個簡單的例子。假設矩陣參數以下：

transform: matrix(1,0,0,1,50,50);/*a=1,b=0,c=0,d=1,e=50,f=50*/ 

如今，咱們根據這個矩陣偏移元素的中心點，假設是(0,0)，即x=0，y=0。

咱們能夠按照上面介紹的矩陣方式，將這個列成矩陣：

因而，變換後的原點位置x’和y’能夠根據矩陣向量的計算規則計算出來：

也就是計算得出x’=50，y’=50。即元素的原點由(0,0)移動到(50,50)的位置。實際上transform:matrix(1,0,0,1,50,50);就等同時transform: translate(50px,50px)。

HTML

<div class="matrix"> <img src="images/cardKingClub.png" alt="" width="70" height="100" /> <img src="images/cardKingClub.png" alt="" width="70" height="100" /> </div> <div class="translate"> <img src="images/cardKingClub.png" alt="" width="70" height="100" /> <img src="images/cardKingClub.png" alt="" width="70" height="100" /> </div> 

CSS

.matrix img:nth-child(2){ z-index: 2; transform: matrix(1,0,0,1,50,50); } .translate img:nth-child(2){ z-index: 2; transform: translate(50px,50px); }

效果以下所示：

經過一些篇幅介紹了矩陣的一些基礎知識，並經過一個簡單的實例用matrix()函數實現translate()的位移效果。接下來咱們分別看看CSS3變形中matrix()和各變形函數之間的關係。

translate()轉換成matrix()

首先來看最簡單的位移translate()函數。咱們都知道transform:translate(tx,ty)的基本含義是將一個元素的顯示位置平移tx,ty。在矩陣變形中，translate的matrix的參數爲：

matrix(1,0,0,1,tx,ty)/*tx,ty分別對應X和Y軸的增量*/ 

其對應的矩陣圖：

由此公式可知：transform:translate(100px,100px)；即對應着transform:matrix(1,0,0,1,100,100)；推算出的結果：x’=x+tx=x+100；y’=y+ty=y+100。

scale()轉換成matrix()

transform:scale(sx,sy)將一個元素按指定的倍數進行縮放，它對應的矩陣是：

matrix(sx*x,0,0,sy*y,0,0);/*sx和sy分別對應X軸和Y軸的縮放比率*/ 

其對應的矩陣圖：

由此公式可知：transform:scale(1.5,1.5);及對應着transform:matrix(1.5,0,01.5,0,0);推算出的結果：x’=x*sx=1.5*x；y’=y*sy=1.5*y。

rotate()轉換成matrix()

transform:rotate(a)將一個元素按指定的角度旋轉，它對應的矩陣是：

　matrix(cos(a),sin(a),-sin(a),cos(a),0,0)；/*cos(a)和sin(a)是指旋轉度轉*/ 

由此公式可知：transform:rotate(45deg);及對應着transform:matrix(0.53,0.85,-0.85,0.53,0,0);[sin(45’)=0.85,cos(45’)=0.53]。推算出來的結果：x’=cos(a) x – sin(a)*y=cos(45)*x – sin(45)*y；y’=sin(a)*x + cos(a)*y = sin(45)*x + cos(45)*y。

skew()轉換成matrix()

transform:skew(ax,ay)將一個元素按指定的角度在X軸和Y軸傾斜，它對應的矩陣是：

matrix(1,tan(ay),tan(ax),1,0,0)/*tan(ax)和tan(ay)是對應的傾斜角度*/ 

其對應的矩陣圖：

由此公式可知：transform:skew(45deg)，對應着transform:matrix(1,0,1,1,0,0)，其中tan(45’)=1。推算出來的結果：x’=x + tan(a)*y；y’=tan(a)*x + y。

上面演示的是CSS3中常見的變形與矩陣的關係，除了上面演示的以外，還有其餘的一些。下圖就是全部CSS3變換與矩陣等價的關係圖：

matrix()實現鏡像

在製圖軟件中變形工具除了旋轉、傾斜、位移、縮放等還有鏡向（水平鏡向、垂直鏡向）：

但鏡像對稱在CSS3變形中沒有相應的簡化操做。只能經過矩陣matrix()來實現。經過前面的內容介紹，咱們清楚的知道，元素變形的原點是其中 心點（在沒有顯式的重置以外），那麼這個鏡向的原點也不例外。由於該軸永遠通過原點，所以，任意對稱軸均可以用y=k*x直線表示。則matrix表示就 是：

matrix((1-k^2)/(1+k^2),2k / (1 + k^2),2k/(1+k^2),(k^2-1)/(1+k^2),0,0)

這個如何獲得的呢？咱們來看看實現的過程。以下圖所示，已經y=k*x，而且知道點(x,y)，求其對稱點（x’,y’）的座標位置：

很簡單，一是垂直，二是中心點在軸線上，所以有：

(y-y') / (x - x') = -1/ k     →       ky-ky' = -x+x'
(x + x') / 2 * k = y + y'     →       kx+kx' = y+y'

很簡單的，把x’和y’提出來，就有：

x' = (1-k^2)/(k^2+1) *x + 2k/(k^2+1) *y; y' = 2k/(k^2+1) *x + (k^2-1)/(k^2+1) *y; 

再結合矩陣公式：

x' = ax+cy+e;
y' = bx+dy+f;

咱們就能夠獲得：

a = (1-k^2)/(k^2+1); b = 2k/(k^2+1); c = 2k/(k^2+1); d = (k^2-1)/(k^2+1);

也就是上面matrix矩陣中的參數值。

CSS3 2D Ttransform兼容性

CSS3的2D變形到目前爲止在主流瀏覽器中獲得較好的支持.CSS3的2D變換雖然獲得衆多主流瀏覽器的支持，但在實際使用的時候須要添加瀏覽器各自的私有屬性：

• IE9中使用2D變形時，須要添加-ms-私有屬性，在IE10+版本開始支持標準版本。
• Firefox3.5至Firefox15.0版本須要添加-moz-的私有屬性，在Firefox16+版本開始支持標準版本。
• Chrome4.0+開始支持2D變形，在實際使用的時候須要添加-webkit-私有屬性。
• Safari3.1+開始支持2D變形，在實際使用的時候須要添加-webkit-私有屬性。
• Opera10.5+開始支持2D變形，在實際使用的時候須要添加-o-私有屬性，但在Opera12.1版本不須要添加私有屬性，不過在Opera15.0+版本須要添加私有屬性-webkit-私有屬性。
• 移動設備iOS Safari3.2+、Android Browser2.1+、Blackberry Browser7.0+、Opera Mobile14.0+、Chrome for Android25.0+須要添加私有屬性-webkit-，而Opera Mobile11.0至Opera Mobile12.1和Firefox for Android19.0+不須要使用瀏覽器私有屬性。

下一節

在這一節中詳細介紹了CSS3中2D tansform各函數的使用。經過早期的CSS3 Transform一文和近期新發布的CSS3 Transform——transform-origin、Transform-style和Perspective屬性和 本文的介紹，有關於CSS3 transform的相關知識就只剩下了3d transform。接下來的一節中，將主要介紹3d transform。但願這一系列的教程能幫助您更好的理解CSS3 transform。敬請期待下一節的到來，若是你對transform有更好的理解，但願能在下面的評論中與咱們一塊兒分享。

如需轉載，煩請註明出處：http://www.w3cplus.com/css3/css3-2d-transform.html