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

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

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

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



    
    
2010年上海世博會(huì)，中國館。

結(jié)合 transition 和 transform 實(shí)現(xiàn)的絢麗動(dòng)畫墻效果。

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

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

移動(dòng)分三種情況，對(duì)應(yīng)transform的三種值。

水平方向和垂直方向同時(shí)移動(dòng)（也就是X軸和Y軸同時(shí)移動(dòng)），當(dāng)值為負(fù)數(shù)時(shí)，反方向移動(dòng)物體。

transform: translate([, ]) ;

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

水平方向上移動(dòng)。

transform: translateX(100px);

垂直方向上移動(dòng)。

transform: translateY(20px);

通過指定的角度對(duì)元素進(jìn)行旋轉(zhuǎn)。值為正順時(shí)針旋轉(zhuǎn)，值為負(fù)逆時(shí)針旋轉(zhuǎn)。

transform: rotate(30deg);

縮放 scale和移動(dòng) translate極其相似，他也具有三種情況，只是參數(shù)對(duì)應(yīng)的是縮放的倍數(shù)，允許小數(shù)、負(fù)數(shù)。

水平和垂直方向上同時(shí)進(jìn)行縮放。

transform: scale([, ]);

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

接下來我們來體驗(yàn)一下負(fù)值的效果。

水平方向縮放。

transform: scaleX(2);

垂直方向縮放。

transform: scaleY(2);

扭曲 skew和 translate、scale一樣同樣具有三種情況，只是參數(shù)值對(duì)應(yīng)的是扭曲的度數(shù)。

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

transform: skew( [, ]);

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

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

在水平方向進(jìn)行扭曲變行。

transform: skewX(30deg);

在垂直方向進(jìn)行扭曲變形。

transform:skewY(10deg);

3D 變換就是在三維環(huán)境下的變換，中學(xué)時(shí)的立體幾何。

3D 變換沒有扭曲操作，有移動(dòng)，旋轉(zhuǎn)，縮放。

介紹 3D 變換 之前我們需先介紹跟3D密切相關(guān)的4個(gè)屬性。

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

透視的使用及是否使用透視的區(qū)別會(huì)在下面的具體變換中介紹。

透視基點(diǎn)也直接影響透視的結(jié)果，形象點(diǎn)說就是透視基點(diǎn)就相當(dāng)于你站在一個(gè)位置看你面前的物體，你可以蹲著看，可以站著看，可以左側(cè)斜著身子看，可以右側(cè)斜著身子看，你的眼睛看的位置不同，可能看到物體的形狀就不同。

透視點(diǎn)有默認(rèn)值 perspective-origin: 50% 50%;, 當(dāng)為元素定義 perspective-origin 屬性時(shí)，其子元素會(huì)獲得相應(yīng)效果，而不是元素本身。

perspective-origin: x-axis y-axis;

x-axis 可選值：

left

center

right

length

%

y-axis 可選值：

top

center

bottom

length

%

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

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

transform-style: flat | preserve-3d;

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

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

transform-style 屬性需要設(shè)置在父元素中。

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

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

backface-visibility: visible | hidden;

下面旋轉(zhuǎn)的時(shí)候有例子。

3D 移動(dòng)有 translate3d(x, y, z) 和 translateZ(z) 兩個(gè)變換函數(shù)。當(dāng)然 2D 移動(dòng)的那三個(gè)也可以應(yīng)用到 3D 移動(dòng)。

分別沿x, y, z 三個(gè)軸同時(shí)移動(dòng)。

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

對(duì)比如下實(shí)例：

這個(gè)例子包含不少內(nèi)容，請認(rèn)真品讀。

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

經(jīng)過這個(gè)例子相信你能大概明白 perspective 和 transform-style 的作用了。

沿z軸方向移動(dòng)。

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

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

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

2D 旋轉(zhuǎn)比較簡單，只有一個(gè)函數(shù)，圍繞一點(diǎn)旋轉(zhuǎn)多少度即可，而3D 旋轉(zhuǎn)要復(fù)雜的多，畢竟在三維空間了。

x為旋轉(zhuǎn)軸旋轉(zhuǎn)指定的度數(shù)。

基本類似下圖的旋轉(zhuǎn)。

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

y為旋轉(zhuǎn)軸旋轉(zhuǎn)指定的度數(shù)。

基本類似下圖的旋轉(zhuǎn)。

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

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

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

除了上面的三個(gè)外，還有一個(gè) rotate3d.

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

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

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

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

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

下面的測試可以看出正負(fù)值的區(qū)別。

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

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

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

學(xué)完了旋轉(zhuǎn)，我們繼續(xù)來探討上面提到的幾個(gè)相關(guān)屬性。

backface-visibility

此屬性用來設(shè)置元素是否透明，默認(rèn)是透明的。下面舉例對(duì)比。

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

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

perspective

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

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

關(guān)于兩者的區(qū)別，可以用下面的示例來區(qū)分。

上面是設(shè)置在舞臺(tái)元素上，下面是設(shè)置在每個(gè)元素上。圖中的效果其實(shí)不難理解。上面舞臺(tái)整個(gè)作為透視元素，因此，顯然，我們看到的每個(gè)子元素的形體都是不一樣的；而下面，每個(gè)元素都有一個(gè)自己的視點(diǎn)，因此，顯然，因?yàn)?b>rotateY的角度是一樣的，因此，看上去的效果也就一模一樣了！

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

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

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

我進(jìn)行了若干種情況的實(shí)踐。

一，多帶帶使用 scaleZ ,發(fā)現(xiàn)無論如何改變縮放值，都沒有任何變化。

  
  
  




    

        
1
    


    

        
2
    

二，讓子元素.front進(jìn)行3D變換，這時(shí)調(diào)整值，可以看出縮放效果。

  
  
  




    

        
1
    


    

        
2
    

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

  
  
  




    

        
1
    


    

        
2
    

四，調(diào)換移動(dòng)和縮放的位置，再改變縮放的值，可以看出變化。

  
  
  




    

        
1
    


    

        
2
    

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

  
  
  




    

        
1
    


    

        
2
    

你看懂3D 縮放了嗎？

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

transform-origin 是用來設(shè)置變換基點(diǎn)的屬性，所謂變換基點(diǎn)即變換的參照點(diǎn)，上面之所以沒有說，是因?yàn)槠溆心J(rèn)值是元素的中心點(diǎn)，并且可以用來設(shè)置2D變換和3D變換的基點(diǎn)。

平移操作不受基點(diǎn)位置的影響，旋轉(zhuǎn)，縮放，扭曲都跟基點(diǎn)有關(guān)聯(lián)。

例如：按元素中心旋轉(zhuǎn)45度和按左上角旋轉(zhuǎn)45度。

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

具體語法如下：

/*只設(shè)置一個(gè)值的語法*/
transform-origin: x-offset
transform-origin:offset-keyword
/*設(shè)置兩個(gè)值的語法*/
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
/*設(shè)置三個(gè)值的語法*/
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

對(duì)上述的值簡述如下：

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

offset-keyword：是top、right、bottom、left或center中的一個(gè)關(guān)鍵詞。

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

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

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

z-offset：用來設(shè)置3D變形中transform-origin遠(yuǎn)離用戶眼睛視點(diǎn)的距離，默認(rèn)值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%

變換基點(diǎn)作用在當(dāng)前元素上。

矩陣變換既可以進(jìn)行2D變換，又可以進(jìn)行3D變換，上面所有的變換都可以通過矩陣變換來實(shí)現(xiàn)，換句話說，上面介紹的變換都是矩陣變換的某個(gè)特例。

下面的內(nèi)容是考驗(yàn)?zāi)銕缀螖?shù)學(xué)的時(shí)候了。

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

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

變換是建立在平面或空間上的，數(shù)字自然而然的可以對(duì)應(yīng)坐標(biāo)值。

既然引入了坐標(biāo)系，你自然而然的想到坐標(biāo)原點(diǎn)，沒錯(cuò)，就是transform-origin這廝。

2D 變換的矩陣函數(shù)是：matrix(a, b, c, d, e, f),對(duì)應(yīng)的矩陣如下圖。

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

下面羅列上述變換對(duì)應(yīng)的矩陣原型：

3D 移動(dòng)的矩陣原型為：

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

2D 移動(dòng)的原型就是上面的 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 移動(dòng)的原型就是上面的 sz=1 的情況。

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

3D 旋轉(zhuǎn)的矩陣原型為：

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

α 為旋轉(zhuǎn)的角度。

2D 旋轉(zhuǎn)其實(shí)就是繞著 z 軸轉(zhuǎn)，即向量 [0, 0, 1].

對(duì)應(yīng)的 matrix 自己寫去吧。

扭曲只有2D 扭曲。

skew(αdeg, βdeg)

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

視距也有對(duì)應(yīng)的矩陣。

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

所有的變換理解成坐標(biāo)運(yùn)算就容易理解多了。

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

下面以3D 移動(dòng)為例演示矩陣的運(yùn)算。

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

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

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

變換涉及到的四個(gè)屬性。

perspective 設(shè)置舞臺(tái)元素（變換元素的父元素），理解為人到舞臺(tái)的距離。

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

transform-origin 作用在變換元素上，控制變換的基點(diǎn)（坐標(biāo)原點(diǎn)）。

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

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

CSS3 Transitions, Transforms和Animation使用簡介與應(yīng)用展示

2D 和 3D 中的 CSS 轉(zhuǎn)換 (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