你需要知道的CSS3動畫技術(2)

作者：Eve Cole 更新時間：2025-01-15 16:16:56

translate

這個名稱“translate（轉化）”有點容易誤解。它事實上是一種使用X和Y座標值來定位元素的方法。

以下為引用的內容：

#nav{
/* 這會將nav元素向左移動10像素並向下移動20像素*/
-moz-transform: translate(10px, 20px);
-webkit-transform: translate(10px, 20px);
}

瀏覽器支援

translate屬性目前只被Firefox， Safari 和Chrome支持，而且還要使用瀏覽器的私人前綴-moz- 和-webkit-。

Skew

Skew也是很有用的transform功能，它可以將一個物件圍繞著x和y軸按照一定的角度傾斜。這和rotate的旋轉不一樣，rotate只是旋轉，而不會讓元素的形狀改變。 skew會讓一個元素的形狀改變。 skew有兩個參數，分別代表x和y軸的傾斜度數。

以下為引用的內容：

#nav{
/* 這會將nav元素向左移動10像素並向下移動20像素*/
-moz-transform: skew(30deg, -10deg);
-webkit-transform: skew(30deg, -10deg);
}

瀏覽器支援

Skew屬性目前只由Firefox， Safari 和Chrome支持，而且還要使用瀏覽器的私人前綴-moz- 和-webkit-。

Matrix

沒錯，Matrix就是矩陣，矩陣是高等數學中非常基礎的一個東東，而在CSS 3中確實一個相當高級的功能，CSS 3引入matrix函數，可以非常靈活的實現上述的各種效果。它有6個參數（a，b，c，d，e，f），它事實上是一個3*3矩陣，經過這個矩陣將舊的參數轉換成新值：

| abe |

| cdf |

| 0 0 1 |

如果你有興趣深入研究，可以看看這裡http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined ，這是SVG的一個文檔，但是對於matrix變換的原理是通用的。

讓我們來看一個例子：

以下為引用的內容：

#nav{
/* nav元素會像右上角傾斜*/
-moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
-webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
}

瀏覽器支援

可喜的是，IE支援matrix濾鏡，雖然它不支援大部分CSS3變形功能，但使用它的這個濾鏡，基本上也可以實現相同的效果，不過，你要先搞清楚矩陣運算再說。 webkit和Firefox（3.5+）都支援此功能。

鍊式變形

變形常常是單獨的，但是如果你想同時用到多種變形，程式碼也是可以快速整合的，特別是使用私有擴充。幸運的是，我們有一些內建的縮寫：

以下為引用的內容：

#nav{
-moz-transform: translate(10, 25);
-webkit-transform: translate(10, 25);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: scale(2, 1);
-webkit-transform: scale(2, 1);
}

這些變形可以被鏈在一起，從而讓你的程式碼更有效率:

以下為引用的內容：

nav{
-moz-transform: translate(10, 25) rotate(90deg) scale(2, 1);
-webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1);
}

這些屬性的真正的威力是合併在一起。你可以移動、旋轉、縮放並控制任何內聯元素和區塊級元素而不使用JavaScript。一旦這些屬性的支援變的更加廣泛，我們就可以創建更豐富和更輕的介面和應用。

transform-origin

transform-origin不是transform的子功能，但和transform關係非常密切。它可以用來指定transform的起點，例如，rotate變形的預設起點是其中間，你可以將起點設定在左上角，或是左下角，這樣rotate變形的結果就可能大不相同了。

transform-origin接受兩個參數，它們可以是百分比，em，px等具體的值，也可以是left,center,right，或者top,middle,bottom等描述性參數。幾個例子：

以下為引用的內容：

.class1{-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
…
}
.class2{-moz-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
....}
.class3{-moz-transform-origin:top left;
-webkit-transform-origin:top left;
....}

瀏覽器相容性

該屬性目前也只有webkit和firefox支持，而且需要添加各自的私有前綴。