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

原文：http://msdn.microsoft.com/zh-tw/library/ie/jj665791.aspx

階層式樣式表 (CSS) 轉換可讓您在二維和立體空間中轉換元素。 您可以使用 CSS 轉換，變更元素在其父元素內的位置、操作元素的旋轉或縮放，以及套用扭曲。新增 perspective 屬性 (或 perspective 轉換函式) 可在轉換中加入立體感。

以下我們將介紹 CSS 轉換座標系統。接著，我們會示範 CSS 所公開的轉換功能，然後透過圖解 perspective 屬性的作用來總結。

CSS 轉換的座標系統

CSS 轉換是沿著形成座標系統的一組座標軸定義。2D 轉換是沿著兩個座標軸定義，如下所示。請注意，y 軸會向下延伸，而非向上延伸，因為系統會轉譯大部分的二維笛卡兒座標系統。

座標系統的 x 軸會沿著所要轉換之元素父節點的水平維度延伸，y 軸則沿著垂直維度延伸。此座標系統的原點 (圖表中的 "(0,0)") 原本位於所要轉換之元素的中心 (除非透過 transform-origin 屬性變更，這將在稍後討論)。

3D 轉換是沿著三個座標軸定義，如下所示 (加入格線有助於視覺化 3D 影像)。

座標系統的 z 軸同時與 x 和 y 軸垂直。此座標系統的原點 (圖表中的 "(0,0,0)") 也位於所要轉換之元素的中心 (除非透過transform-origin 屬性變更)。

套用轉換

將轉換套用到元素相當簡單。首先，將 transform 屬性加入選取器，然後附加轉換函式的清單。例如，下列宣告會套用平移轉換：

CSS

transform: translateX(400px);

此轉換的結果是，原始元素向右「平移」(移動) 400 個像素。如果我們將此轉換套用到藍色方形的 div 元素，會得到以下結果。為了清楚解說，除了已轉換的元素之外，還會顯示套用轉換前所出現的元素，而且原始元素會變暗。

您可以檢視此範例的即時版本。請注意，為獲得瀏覽器的最大相容性，您應該在要支援的每個瀏覽器的轉換屬性之前，加上適當的瀏覽器專屬字首。例如，下列宣告可確保 Windows Internet Explorer 9 ("-ms-")、Chrome 與 Safari ("-webkit-")、Firefox ("-moz-")、Opera ("-o-")，以及不需要字首之瀏覽器 (例如 Internet Explorer 10) 中的支援。

CSS

  -ms-transform: translateX(400px);
  -webkit-transform: translateX(400px);
  -moz-transform: translateX(400px);
  -o-transform: translateX(400px);
  transform: translateX(400px);

2D 轉換函式

系統支援這些轉換函式用於 2D 轉換，而且可以從 Internet Explorer 9 開始使用。

函式	說明
matrix(a, b, c, d, e, f)	以六個值的轉換矩陣形式指定 2D 轉換。
rotate(angle)	使用參數中指定的角度，沿著元素原點指定 2D 旋轉。
scale(sx,sy)	使用兩個參數描述的 [sx,sy] 縮放向量來指定 2D 縮放作業。
scaleX(sx)	使用 [sx,1] 縮放向量來指定縮放作業，其中 sx 是指定的參數。
scaleY(sy)	使用 [1,sy] 縮放向量來指定縮放作業，其中 sy 是指定的參數。
skew(angleX,angleY)	沿著 x 和 y 軸指定扭曲轉換。第一個角度參數會指定 x 軸上的扭曲。第二個角度參數會指定 y軸上的扭曲。
skewX(angle)	沿著 x 軸，使用指定的角度指定扭曲轉換。
skewY(angle)	沿著 y 軸，使用指定的角度指定扭曲轉換。
translate(tx,ty)	使用向量 [tx,ty] 指定 2D 平移，其中 tx 是第一個平移值參數，而 ty 是選用的第二個平移值參數。
translateX(tx)	使用 x 方向的指定數量來指定平移。
translateY(ty)	使用 y 方向的指定數量來指定平移。

 

若是平移函式，這些引數可以是支援的 CSS 長度類型或百分比。若是旋轉和扭曲函式，這些引數可以是支援的 CSS 角度類型或原始數字 (解譯為旋轉度數)。最後，縮放函式接受代表縮放係數的數字引數。

2D 轉換範例

現在讓我們看一下數個 2D CSS 轉換的應用。

我們將從沿著 y 軸平移開始。請記住，系統會將平移值解譯為從版面配置中的元素原始位置的偏移。

檢視此範例的即時示範。

現在讓我們嘗試一些旋轉、扭曲以及縮放。此螢幕擷取畫面顯示一個方形且重複的 div，其中每次重複都會套用一個轉換。

檢視此範例的即時示範。

此處未顯示 matrix 轉換函式。它可讓您手動指定自訂的 2D 轉換。嘗試手動指定轉換之前，請先熟悉轉換座標系統與轉譯。

套用多個轉換

您可以透過「鏈結」轉換—將多個轉換函式依您希望的套用順序新增到單一轉換屬性，以套用多個轉換。請注意，附加轉換的順序會影響最終的結果。讓我們看一下範例。

下列宣告可能看起來很類似，但它們會產生不同的結果。

transform: rotate(45deg) translateX(200px);
transform: translateX(200px) rotate(45deg);

您可以在此檢視套用到不同 div 元素的這些宣告。以下是這個範例的螢幕擷取畫面。原始元素的位置以灰色方塊表示。紫色 (上方) 方塊已經套用 translateX 函式，然後再套用 rotate 函式。粉紅色 (下方) 方塊會先旋轉，然後再進行平移。

變更轉換原點

請考慮以下轉換：

transform: rotate(45deg);

使用您的瀏覽器檢視這個範例。

已轉換的元素會圍繞中心旋轉。但是如果我們希望元素改為以其中一個角為中心旋轉，或者圍繞著隨意點旋轉，該怎麼辦？這時就需要使用 transform-origin 屬性。

transform-origin 屬性可讓您指定元素轉換的原點。若是旋轉，變更轉換原點的值將會移動旋轉的中心。transform-origin 屬性的初始值為 "50% 50%"，表示原點置於元素的中心。如果未指定 transform-origin 屬性，這是隱含的值。

讓我們看一下當 transform-origin 屬性設為不同值時，將這個相同的 rotate 宣告套用到元素的一些範例。此範例頁面包含相同的元素，並重複套用相同的轉換，但不同的轉換原點。 這個範例頁面很類似，但套用扭曲轉換。

接著，我們將使用 CSS 3D 轉換，開始將深度加入我們的網頁中。

3D 轉換函式

設計人員可以透過 Internet Explorer 10，使用 CSS 3D 轉換，分割成第三個維度。系統支援此處所列的轉換函式用於 3D 轉換，而且可以從 Internet Explorer 10 開始使用。

系統會使用與 2D 轉換相同的方式套用 3D 轉換 (將 transform 屬性新增到元素的樣式中)。若要使用第三個維度，則會擴充可用轉換函式的清單以包含：

函式	說明
rotate3d(x, y, z, angle)	指定順時針的 3D 旋轉。
rotateX(angle)	指定沿著 x 軸根據指定角度的順時針方向旋轉。
rotateY(angle)	指定沿著 y 軸根據指定角度的順時針方向旋轉。
rotateZ(angle)	指定沿著 z 軸根據指定角度的順時針方向旋轉。
scale3d(sx,sy,sz)	使用三個參數描述的 [sx,sy,sz] 縮放向量來指定 3D 縮放作業。
scaleZ(sz)	使用 [1,1,sz] 縮放向量來指定縮放作業，其中 sz 是指定的參數。
translate3d(tx, tytz)	使用向量 [tx,ty,tz] 指定 3D 平移，其中 tx、ty 與 tz 分別是第一個、第二個及第三個平移值參數。
translateZ(tz)	使用 z 方向的指定數量來指定平移。
matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p)	使用 16 個值 (以欄為主的順序) 的 4×4 同質矩陣指定 3D 轉換。

 

讓我們看一下 3D 轉換實際執行的一些範例。此範例頁面有一列方形，每個方形都套用一個轉換 (或多個轉換)。

您可能會注意到這些轉換似乎不是 3D。您可能會預期因為此種轉換會沿著 x 或 y 軸旋轉元素「到畫面中」，因此該元素應該看起來會越來越小。但是 translateZ(-50px) 函式一點也不會變更元素視覺上的外觀！發生這個狀況是因為系統預設會使用正視投影 (使用 2D 表示 3D 的一種方法) 來計算 CSS 轉換。2D 的世界地圖是您可能比較熟悉的正視投影範例。使用 CSS 轉換時，物件在從檢視器移開時不會變小。

幸好 CSS 轉換規格提供了一個屬性，可讓我們輕鬆地將透視加入您的轉換中。

將透視加入 3D 轉換

perspective 屬性可將「深度」效果加入 CSS 轉換。

函式	說明
perspective	指定一個長度值，這個值代表從這個透視長度檢視物件的所有子元素。

 

請看看下列圖表：

請注意如何在父元素上「平面化」(或「投射」) 子元素。所產生的「投影」表面 (在圖表上以橘色顯示) 是父元素從影像平面定義的元素距離係數 (根據所設定之 3D 轉換的組合)。此外，父元素本身與「檢視器」的距離 (在上圖中註解為「透視深度」) 也會納入考慮。perspective CSS 屬性可讓我們指定該距離。

例如，讓我們來看看上一個範例中所使用的相同轉換，但這次套用透視投影。

在此範例中，我們將設為 200px 的 perspective 屬性套用到範例 div 元素的父元素中。請注意，當您將滑鼠暫留在元素上 (或點選元素) 時，轉換的視覺結果的確是 3D。translateZ 轉換會如預期般運作 (也就是，該元素會從檢視器推「遠」，而變得更小)。同時請注意，我們可以使用與 2D 轉換類似的方式，結合 3D 轉換。

微調 3D 轉換的另一種方式是使用 perspective-origin 屬性。perspective-origin 屬性會設定相對於套用透視轉換之元素的檢視器位置。換句話說，該屬性可讓我們建立離軸投影。

此範例頁面與上一個範例頁面相同，但 perspective-origin 屬性設為 "30% 50%"。

perspective-origin 的預設值為 "50% 50%"，表示檢視位置與元素中間平行。在上一個範例中，我們已經將檢視位置向左位移 ("30% 50%")。在下一個範例中，當我們透過將 perspective-origin 屬性設為 "80% 50%"，以便改為位移到右側時，您就可以看到差異。

總結

到目前為止，我們已經使用 2D 和 3D 以及部分伴隨的屬性 (transform-origin、perspective 與 perspective-origin) 示範 CSS 轉換。