摘要：概覽變換也叫轉換，主要包括以下幾種旋轉扭曲縮放和移動以及矩陣變形。變換沒有扭曲操作，有移動，旋轉，縮放。三，取消的變換，將變換應用到上并置于縮放前，改變縮放值，沒有任何變化。

CSS3 變換也叫 2D/3D轉換，主要包括以下幾種：旋轉(rotate) 、扭曲 (skew) 、縮放(scale) 和 移動(translate) 以及 矩陣變形(matrix) 。transform 屬性常和 transition 一起使用來構造絢麗的過渡動畫效果。

本文涉及的內容較多，不太好理解，需要耐心認真閱讀。

    
    
上海鮮花港的郁金香，花名：Ballade Dream。



    
    
2010年上海世博會，中國館。

結合 transition 和 transform 實現的絢麗動畫墻效果。

所謂的 2D 變換，就是指在二維平面上的變換，中學學的平面幾何。

2D 變換就是圍繞 x 軸，y 軸及 原點 組成的平面所做的一些變換。

移動分三種情況，對應transform的三種值。

水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動），當值為負數時，反方向移動物體。

transform: translate([, ]) ;

例如：transform: translate(100px, 20px);

水平方向上移動。

transform: translateX(100px);

垂直方向上移動。

transform: translateY(20px);

通過指定的角度對元素進行旋轉。值為正順時針旋轉，值為負逆時針旋轉。

transform: rotate(30deg);

縮放 scale和移動 translate極其相似，他也具有三種情況，只是參數對應的是縮放的倍數，允許小數、負數。

水平和垂直方向上同時進行縮放。

transform: scale([, ]);

例如： transform: scale(2, 1.5); 寬度是原來的2倍，高度是原來的1.5倍。

接下來我們來體驗一下負值的效果。

水平方向縮放。

transform: scaleX(2);

垂直方向縮放。

transform: scaleY(2);

扭曲 skew和 translate、scale一樣同樣具有三種情況，只是參數值對應的是扭曲的度數。

使元素在水平和垂直方向同時扭曲，值為扭曲的度數。

transform: skew( [, ]);

例如：transform:skew(30deg, 10deg);

注意上圖中的度數偏轉，x軸方向的扭曲是拉y軸，y軸方向的扭曲是拉x軸，角度的方向也很古怪，注意記憶。

在水平方向進行扭曲變行。

transform: skewX(30deg);

在垂直方向進行扭曲變形。

transform:skewY(10deg);

3D 變換就是在三維環境下的變換，中學時的立體幾何。

3D 變換沒有扭曲操作，有移動，旋轉，縮放。

介紹 3D 變換 之前我們需先介紹跟3D密切相關的4個屬性。

perspective 屬性定義 3D 元素距視圖的距離，你可以形象的理解為物體距你的距離，以像素計。該屬性的存在與否決定了你看到的是2D還是3D，沒有透視，不成3D。

透視的使用及是否使用透視的區別會在下面的具體變換中介紹。

透視基點也直接影響透視的結果，形象點說就是透視基點就相當于你站在一個位置看你面前的物體，你可以蹲著看，可以站著看，可以左側斜著身子看，可以右側斜著身子看，你的眼睛看的位置不同，可能看到物體的形狀就不同。

透視點有默認值 perspective-origin: 50% 50%;, 當為元素定義 perspective-origin 屬性時，其子元素會獲得相應效果，而不是元素本身。

perspective-origin: x-axis y-axis;

x-axis 可選值：

left

center

right

length

%

y-axis 可選值：

top

center

bottom

length

%

理解perspective-origin 這樣描述的：默認就是所看舞臺或元素的中心。有時候，我們對中心的位置是不感興趣的，希望視線放在其他一些地方。

transform-style 屬性是3D空間一個重要屬性，指定嵌套元素如何在3D空間中呈現。他主要有兩個屬性值：flat 和preserve-3d。

transform-style: flat | preserve-3d;

其中flat 值為默認值，表示所有子元素在2D平面呈現。preserve-3d 表示所有子元素在3D空間中呈現。

也就是說，如果對一個元素設置了transform-style 的值為flat，則該元素的所有子元素都將被平展到該元素的2D平面中進行呈現而不是它的前面或者后面。如果對一個元素設置了transform-style 的值為preserve-3d ，它表示不執行平展操作，他的所有子元素位于3D空間中。

transform-style 屬性需要設置在父元素中。

具體的使用看下面的具體變換。

在現實世界中，你在一張白紙上寫下一些字，一般情況下從白紙后面是看不到寫的啥的。而在CSS3的3D世界里，默認是可以從白紙的后面看到前面( visible )的內容的。

backface-visibility: visible | hidden;

下面旋轉的時候有例子。

3D 移動有 translate3d(x, y, z) 和 translateZ(z) 兩個變換函數。當然 2D 移動的那三個也可以應用到 3D 移動。

分別沿x, y, z 三個軸同時移動。

x, y軸的移動比較好理解，translate3d(x, y, 0) 等價于 translate(x, y), z 軸的移動你可以理解為：在你眼前的一個物體向你走來和遠去，離你越近（z值越大）你感覺它越大，離你越遠（z值越小）你感覺它越小。不過，變大變小是有前提的，就是我們前面說到的 perspective 屬性需要指定合適的值。

對比如下實例：

這個例子包含不少內容，請認真品讀。

例子里有四個場景，s3 沒有加透視( perspective: none; )，往z 軸移動了，圖片沒有任何大小變化，s4 的呈現樣式為 transform-style: flat; ，圖片堆疊在一個平面內。s1 和 s2 既加了透視又設置樣式為3D，所以s1 向視點靠近，圖片變大，s2向視點遠離，圖片變小，同時呈現出遮隱效果。

經過這個例子相信你能大概明白 perspective 和 transform-style 的作用了。

沿z軸方向移動。

如果你理解了上面的例子，這個自然就明白了。

借此屬性，再來說說 perspective. translateZ 的功能就是讓元素在自己的眼前或近或遠，元素或大或小。不過需要注意的是：當translateZ值非常接近perspective，但不超過的時候，該元素的大小就會撐滿整個屏幕（如果父輩元素沒有類似overflow:hidden的限制的話）。因為這個時候，子元素正好移到了你的眼睛前面，所謂“一葉蔽目，不見泰山”，就是這么回事。當translateZ值再變大的時候，就看不見了——我們是看不見眼睛后面的東西的！

下圖的效果是從 transform: translateZ(-150px); -> transform: translateZ(200px); 的效果。視距為150px

2D 旋轉比較簡單，只有一個函數，圍繞一點旋轉多少度即可，而3D 旋轉要復雜的多，畢竟在三維空間了。

x為旋轉軸旋轉指定的度數。

基本類似下圖的旋轉。

transform: translate(30px) rotateX(30deg);

y為旋轉軸旋轉指定的度數。

基本類似下圖的旋轉。

transform: translate(0, 30px) rotateY(45deg);

z為旋轉軸旋轉指定的度數。從效果上來看，其實它和2D 變換的 rotate(angle) 完全一致。

transform: rotateZ(45deg);
transform: rotate(45deg);

除了上面的三個外，還有一個 rotate3d.

我們知道 rotateX 是以x軸為旋轉軸， rotateY是以y軸為旋轉軸， rotateZ 是以z軸為旋轉軸，如果我不想以這三個軸為旋轉軸呢？這時我們的 rotate3d 就派上用場了。

中學我們學過向量（空間向量），[x, y, z] 三個向量可以確定一個空間向量，向量是有方向和大小的，三個值的范圍均是 [-1 1], 例如：x=1 表示x軸正方向，x=-1 表示x軸反方向。

rotateX(a)函數功能等同于 rotate3d(1,0,0,a)

rotateY(a)函數功能等同于 rotate3d(0,1,0,a)

rotateZ(a)函數功能等同于 rotate3d(0,0,1,a)

下面的測試可以看出正負值的區別。

再看一下 rotate3d(1, 1, 1, 45deg) 和 rotate3d(-1, -1, -1, 45deg) 的。

你只要有一定的空間想象能力，能確定旋轉軸位置，就能差不多想通它的變換，實在不行，拿一張撲克用手轉轉。

注： 本屬性的效果中我沒有添加transform-style: preserve-3d; 你實踐的時候記得添上，并再次體會 flat 和 preserve-3d 的區別。

學完了旋轉，我們繼續來探討上面提到的幾個相關屬性。

backface-visibility

此屬性用來設置元素是否透明，默認是透明的。下面舉例對比。

backface-visibility: visible;
transform: translate3d(30px,30px,200px) rotateY(0deg);/*從0不斷增加*/

backface-visibility: hidden;
transform: translate3d(30px,30px,200px) rotateY(0deg);/*從0不斷增加*/

perspective

perspective屬性有兩種書寫形式，一種用在舞臺元素上（動畫元素們的共同父輩元素）；第二種就是用在當前動畫元素上，與transform的其他屬性值寫在一起。

.stage {
    perspective: 300px;
}
.stage .box {
    transform: perspective(300px) rotateY(45deg);
}

關于兩者的區別，可以用下面的示例來區分。

上面是設置在舞臺元素上，下面是設置在每個元素上。圖中的效果其實不難理解。上面舞臺整個作為透視元素，因此，顯然，我們看到的每個子元素的形體都是不一樣的；而下面，每個元素都有一個自己的視點，因此，顯然，因為rotateY的角度是一樣的，因此，看上去的效果也就一模一樣了！

上面的第8個元素不見了，這不難理解，前面一排門，每個門都是1米寬，你距離門3米，顯示，當所有門都開了45°角的時候，此時，距離中間門右側的第三個門正好與你的視線平行，這個門的門面顯然就什么也看不到。

3D變形中的縮放主要有 scaleZ(z) 和 scale3d(x,y,z) 兩種函數。

2D 環境下的縮放比較好理解，元素進行相應的放大縮小即可，而3D 環境下涉及到z 軸的縮放，z 軸的縮放很奇怪，至今沒有想太透徹，只是簡單的實踐實踐。有曉得的留言告知，后期想透徹了再更新此處。

我進行了若干種情況的實踐。

一，多帶帶使用 scaleZ ,發現無論如何改變縮放值，都沒有任何變化。

  
  
  




    

        
1
    


    

        
2
    

二，讓子元素.front進行3D變換，這時調整值，可以看出縮放效果。

  
  
  




    

        
1
    


    

        
2
    

三，取消.front的變換，將變換應用到.c2上并置于縮放前，改變縮放值，沒有任何變化。

  
  
  




    

        
1
    


    

        
2
    

四，調換移動和縮放的位置，再改變縮放的值，可以看出變化。

  
  
  




    

        
1
    


    

        
2
    

五，改變transform-origin（下面會介紹此屬性）的默認值，再改變縮放值也可以看出變化。

  
  
  




    

        
1
    


    

        
2
    

你看懂3D 縮放了嗎？

此屬性值不再多介紹，x, y, z 同scaleX(x), scaleY(y), scaleZ(z)。

transform-origin 是用來設置變換基點的屬性，所謂變換基點即變換的參照點，上面之所以沒有說，是因為其有默認值是元素的中心點，并且可以用來設置2D變換和3D變換的基點。

平移操作不受基點位置的影響，旋轉，縮放，扭曲都跟基點有關聯。

例如：按元素中心旋轉45度和按左上角旋轉45度。

更改基點很好掌握，其屬性值可以是百分比、em、px等具體的值，也可以是top、right、bottom、left和center這樣的關鍵詞。

具體語法如下：

/*只設置一個值的語法*/
transform-origin: x-offset
transform-origin:offset-keyword
/*設置兩個值的語法*/
transform-origin：x-offset  y-offset
transform-origin：y-offset  x-offset-keyword
transform-origin：x-offset-keyword  y-offset
transform-origin：x-offset-keyword  y-offset-keyword
transform-origin：y-offset-keyword  x-offset-keyword
/*設置三個值的語法*/
transform-origin：x-offset  y-offset  z-offset
transform-origin：y-offset  x-offset-keyword  z-offset
transform-origin：x-offset-keyword  y-offset  z-offset
transform-origin：x-offset-keyword  y-offset-keyword  z-offset
transform-origin：y-offset-keyword  x-offset-keyword  z-offset

對上述的值簡述如下：

x-offset：用來設置transform-origin水平方向Ｘ軸的偏移量，可以使用和值，同時也可以是正值（從中心點沿水平方向Ｘ軸向右偏移量），也可以是負值（從中心點沿水平方向Ｘ軸向左偏移量）。

offset-keyword：是top、right、bottom、left或center中的一個關鍵詞。

y-offset：用來設置transform-origin屬性在垂直方向Ｙ軸的偏移量，可以使用和值，同時可以是正值（從中心點沿垂直方向Ｙ軸向下的偏移量），也可以是負值（從中心點沿垂直方向Ｙ軸向上的偏移量）。

x-offset-keyword：是left、right或center中的一個關鍵詞，可以用來設置transform-origin屬性值在水平Ｘ軸的偏移量。

y-offset-keyword：是top、bottom或center中的一個關鍵詞，可以用來設置transform-origin屬性值在垂直方向Ｙ軸的偏移量。

z-offset：用來設置3D變形中transform-origin遠離用戶眼睛視點的距離，默認值z=0，其取值可以，不過在這里將無效。

看上去transform-origin取值與background-position取值類似。

top = top center = center top = 50% 0

right = right center = center right = 100%或(100% 50%)

bottom = bottom center = center bottom = 50% 100%

left = left center = center left = 0或(0 50%)

center = center center = 50%或（50% 50%）

top left = left top = 0 0

right top = top right = 100% 0

bottom right = right bottom = 100% 100%

bottom left = left bottom = 0 100%

變換基點作用在當前元素上。

矩陣變換既可以進行2D變換，又可以進行3D變換，上面所有的變換都可以通過矩陣變換來實現，換句話說，上面介紹的變換都是矩陣變換的某個特例。

下面的內容是考驗你幾何數學的時候了。

CSS 中使用 4x4 矩陣表示變換。

矩陣中全是數（整數或小數，或者正數、負數和零），數字對于我們的顯示器來說，你可以理解為像素值。

變換是建立在平面或空間上的，數字自然而然的可以對應坐標值。

既然引入了坐標系，你自然而然的想到坐標原點，沒錯，就是transform-origin這廝。

2D 變換的矩陣函數是：matrix(a, b, c, d, e, f),對應的矩陣如下圖。

3D 變換的矩陣函數是：matrix3d(m11,m12,m13,m14,m21,m22,m23,m24,m31,m32,m33,m34,m41,m42,m43,m44)

下面羅列上述變換對應的矩陣原型：

3D 移動的矩陣原型為：

matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1)

2D 移動的原型就是上面的 tz=0 的情況。

matrix(1, 0, 0, 1, x, y)

3D 縮放的矩陣原型為：

matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1)

2D 移動的原型就是上面的 sz=1 的情況。

matrix(sx, 0, 0, sy, 0, 0)

3D 旋轉的矩陣原型為：

旋轉軸由向量 [x, y, z] 定義。在上面的 rotate3d 中介紹了。

α 為旋轉的角度。

2D 旋轉其實就是繞著 z 軸轉，即向量 [0, 0, 1].

對應的 matrix 自己寫去吧。

扭曲只有2D 扭曲。

skew(αdeg, βdeg)

只沿x軸扭曲，β=0,只沿y軸扭曲，α=0.

視距也有對應的矩陣。

所有的變換都是建立在2D或3D空間中，其實也可以完全理解成3D空間（3D包含2D嘛，z軸為0不就是2D嘛）。

所有的變換理解成坐標運算就容易理解多了。

看一下矩陣乘法的定義吧：

下面以3D 移動為例演示矩陣的運算。

原坐標從 (a,b,c) 變到 (a+x,b+y,c+z).

我們從直觀和精確計算深入探討了CSS3 變換的各種情況，相信你對變換已經有了一定的了解。

2D 變換除了扭曲稍微繞點，其他的都比較好理解。3D變換沒有扭曲，3D旋轉稍微復雜點，不過也好理解，3D縮放沒有透徹理順，誰知道請明示一下。

變換涉及到的四個屬性。

perspective 設置舞臺元素（變換元素的父元素），理解為人到舞臺的距離。

transform-style 也是設置在父元素，控制子元素是在二維平面還是三維空間。

transform-origin 作用在變換元素上，控制變換的基點（坐標原點）。

backface-visibility 作用在變換元素上，指示變換元素旋轉180度背面是否可見。

這篇文章耽擱的太久了，先這樣發吧。有關于3D 縮放的記得留言討論。

CSS3 Transitions, Transforms和Animation使用簡介與應用展示

2D 和 3D 中的 CSS 轉換 (Preliminary) CSS3中 translate3D詳解

理解CSS3 transform中的Matrix(矩陣)

好吧，CSS3 3D transform變換，不過如此！

CSS3 3D Transform

CSS3 Transform

CSS3 Transform——transform-origin

Mathematical Description of Transform Functions

The Transform Functions