translate
這個名稱「translate(轉換)」有點容易誤解。它事實上是一種使用X和Y座標值來定位元素的方法。
以下為引用的內容: #nav{ |
瀏覽器支援
translate屬性目前只被Firefox, Safari 和Chrome支持,而且還要使用瀏覽器的私人前綴-moz- 和-webkit-。
Skew
Skew也是很有用的transform功能,它可以將一個物件圍繞著x和y軸按照一定的角度傾斜。這和rotate的旋轉不一樣,rotate只是旋轉,而不會讓元素的形狀改變。 skew會讓一個元素的形狀改變。 skew有兩個參數,分別代表x和y軸的傾斜度數。
以下為引用的內容: #nav{ |
瀏覽器支援
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{ |
瀏覽器支援
可喜的是,IE支援matrix濾鏡,雖然它不支援大部分CSS3變形功能,但使用它的這個濾鏡,基本上也可以實現相同的效果,不過,你要先搞清楚矩陣運算再說。 webkit和Firefox(3.5+)都支援此功能。
鍊式變形
變形常常是單獨的,但是如果你想同時用到多種變形,程式碼也是可以快速整合的,特別是使用私有擴充。幸運的是,我們有一些內建的縮寫:
以下為引用的內容: #nav{ |
這些變形可以被鏈在一起,從而讓你的程式碼更有效率:
以下為引用的內容: nav{ |
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和firefox支持,而且需要添加各自的私有前綴。