所謂元素轉換，事實上就是對元素的坐標在二維或三維空間上做矩陣換算。依據換算的結果，又分成了多種轉換類型。但不管是哪一種。都不影響元素在頁面上的物理空間。僅僅改變元素的視覺效果。

也就是說，比方元素縮放、旋轉都不影響周圍其它元素的布局。有些人喜歡用平移做元素居中效果，事實上非常不妥，由於元素原來的物理空間還在那裏，控制起來不輕松。

另外。轉換屬性（transform）僅僅有一個。也就是說，假設之前做了旋轉（rotate）。假設再做平移（translate），旋轉效果就會消失。

假設既想平移，又想旋轉，必須使用matrix或matrix3d方法。但也不是不能疊加，僅僅是多個效果需用空格分開，比方：transform:rotateY(90deg) translateZ(50px);

不管是二維還是三維。記住。全部這些轉換基於的是笛卡爾坐標左手系（並且是沿X軸翻轉了180度的左手系），而不是右手系。假設你不清楚左手系和右手系，請查度娘。

設置轉換原點

轉換原點在縮放、傾斜和旋轉中非常重要，詳細參考各轉換。

轉換原點默認是元素的中心，即transform-origin: 50% 50% 0。

轉換矩陣

在二維空間中。轉換矩陣是一個3x3矩陣。在三維空間中，是4x4矩陣。

以下這個公式左邊的2x2矩陣。就是一個轉換矩陣，由於是2x2的，所以僅僅能做縮放、旋轉、傾斜，不能做平移。因此。實際上，瀏覽器使用的是3x3或4x4的矩陣。

矩陣右邊(x,y)是原坐標。(ax+cy, bx+dy)是轉換後的坐標。

CSS 2D transforms

Translating –平移

平移和position:relative效果類似，不影響元素的物理空間位置。僅僅影響視覺空間位置，也就是說盡管看起來元素已經離開了原來的位置，但它所占的物理空間依舊是原來位置。並且僅僅在原位置上對其它元素有影響。

平移的距離即能夠使用像素值，也可使用百分比。假設是百分比，則盒子的寬高（width & height）決定了百分比的終於值，當中，水平位移取決於盒子寬度，垂直位移取決於盒子高度。

transform: translate(50px, 100px);

transform: translateX(50px);

transform: translateY(50%);
 

transform: translateY(100px);

在不支持的瀏覽器中。使用position:relative，然後通過top和left即能夠調整。

Scaling – 縮放

縮放即指放大或縮小，但效果僅僅相當於用放大鏡看，元素所占的物理空間依舊沒有變化。因此，放大或縮小元素，不影響周圍其它元素的布局。

當然，放大縮小也是有方向的，由於原點默認是中心點。所以默認是中心向四周放大。假設要改動放大縮小方向，須要改動transform-origin。

假設有一個值為0。那麽這個元素就看不到了；假設scale僅僅接受了一個參數，表示x和y方向縮放相同倍數。

transform: scale(2.5);

transform: scale(2, 1);

transform: scaleX(2);

transform-origin: left top;

Skewing – 傾斜

傾斜有向X軸傾斜和向Y軸傾斜。當中向X軸傾斜在視覺上是逆時針扭曲，向Y軸傾斜在視覺上是順時針扭曲。因此，假設X軸和Y軸傾斜角度相同。而正負相反，則等同於旋轉（rotate），旋轉方向由第一個值決定。

傾斜邏輯：一個維度傾斜的時候。還有一個維度的大小保持不變。比方。skew(30deg)。表示向X軸方向傾斜30度，但元素的縱軸高度保持不變。

因此，對於skew(30deg)，第一象限空間的變換公式為x=x+y*tan(30deg)。

transform: skew(30deg);

transform: skew(30deg, 0);

transform: skew(30deg, -30deg);

註意：傾斜沒有3D轉換。

Rotating – 旋轉

二維旋轉事實上就是在三維空間上繞Z軸旋轉，旋轉方向為順時針方向，原點默認是元素的中心點，由於transform-origin的默認值為transform-origin:50% 50% 0。假設要把左上角設為原點。則應該設置transform-origin為transform-origin: 0 0 0。

transform: rotate(30deg);

CSS 3D transform

以下提到的3D轉換，在IE9都不支持。

Translating -平移

沿X和Y軸的平移是二維就支持的，這裏主要講怎樣沿Z軸平移。

想要看到3D效果的沿Z軸平移效果。首先父元素須要設置perspective，即元素前面離用戶的距離是多少。如今假設perspective為正值，即perspective>0px。

假設translateZ(shift)中。shift小於perspective。則表示元素依舊在用戶眼睛正前方，用戶始終能夠看到元素。假設shift大於perspective。則表示元素已經已到了用戶的後面，用戶看不到這個元素了。

並且你會發現shift在小於perspective的情況下，假設shift值越大，元素看起來也越大。這符合人眼看由遠及近的物體時所示情況。

另外，註意z軸坐標和z-index全然是兩碼事。互不影響。

transform: translate3d(50px, 100px, 0);

Scaling - 縮放

3D縮放須要註意的是縮放原點，原點決定了縮放方向。對視覺效果影響非常大。

Rotating – 旋轉

相同。要想看到3D旋轉效果。也須要父元素設置有perspective樣式，否則轉換方法rotate3d()、rotateX、rotateY、rotateZ的效果和在二維空間一樣，並且rotateX和roateY在二維空間是無效的。只是這最好還是礙rotate3d和rotateZ能夠做XY二維空間換算。比方，rotate3d(0, 0, 1, 10deg)就能夠讓元素在二維空間上順時針旋轉10度，同理，rotateZ(10deg)也能夠讓元素在二維空間上順時針旋轉10度。

transform: rotate3d(0, 0, 1, 30deg);

註意：ie9不支持rotate3d、rotateX、rotateY、rotateZ方法。

Perspective - 透視

透視距離表示z=0平面和用戶之間的距離，perspective>0表示z=0平面在用戶前面。否則在用戶後面。這時用戶就看不到這個元素了。

<div style="perspective: 50px;">
    <div style="translateZ(20px);">content</div>
</div>

上面這段代碼表示z=0平面離用戶50個像素，而content離z=0平面20個像素，也就是說如今content離用戶僅僅有30個像素。

因此。用戶看到的content比正常的要大。另外transform:perspective(50px)+transform-style:preserve-3d效果等同於perspective:50px。

但perspective:50px和transform:perspective(50px)有一個非常大的差別。就是perspective屬性的原點是perspective-origin。而transform的原點是tranform-origin。

兼容性

早版本號的Firefox、Chrome、Opera或IE，分別使用一下前綴兼容：

-moz-transform: rotate(30deg);

-o-transform: rotate(30deg);

-webkit-transform: rotate(30deg);

-ms-transform: rotate(30deg);

transform: rotate(30deg);

IE

IE的BasicImage濾鏡支持四個旋轉值：0,1, 2, 和 3分別相應0, 90, 180和 270度。

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

另外，IE有一個矩陣濾鏡。也能夠做到CSS的transform效果，詳細參考：https://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx。

假設自己算不來。這裏另一個工具能夠幫助你計算：http://www.useragentman.com/IETransformsTranslator/。註意，用高版本號的IE在兼容模式下不一定能看這些效果。須要真實的該版本號IE才幹看到。

元素轉換-Transform