|
translate
這個名稱“translate(轉(zhuǎn)化)”有點容易誤解。它事實上是一種使用X和Y坐標(biāo)值定位元素的方法。
#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的旋轉(zhuǎn)不一樣，rotate只是旋轉(zhuǎn)，而不會讓元素的形狀改變。skew會讓一個元素的形狀改變。skew有兩個參數(shù)，分別代表x和y軸的傾斜度數(shù)。
#nav{
/* 這會將nav元素向左移動10像素并向下移動20像素 */
-moz-transform: skew(30deg, -10deg);
-webkit-transform: skew(30deg, -10deg);
}
瀏覽器支持
Skew屬性目前只被Firefox, Safari 和Chrome支持，而且還要使用瀏覽器的私有前綴-moz- 和-webkit-。
Matrix
沒錯，Matrix就是矩陣，矩陣是高等數(shù)學(xué)中非�；A(chǔ)的一個東東，而在CSS 3中確實一個相當(dāng)高級的功能，CSS 3引入matrix函數(shù)，可以非常靈活的實現(xiàn)上述的各種效果。它有6個參數(shù)(a,b,c,d,e,f)，它事實上是一個3*3矩陣，經(jīng)過該矩陣將舊的參數(shù)轉(zhuǎn)換成新值：
| a b e |
| c d f |
| 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變形功能，但是使用它的這個濾鏡，基本也可以實現(xiàn)相同的效果，不過，你要先搞明白矩陣運算再說。webkit和Firefox(3.5+)都支持該功能。
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 你需要知道的CSS3動畫技術(shù) [2] 下一頁 你需要知道的CSS3動畫技術(shù) [4]
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 你需要知道的CSS3動畫技術(shù) [3]
