瀏覽器支持

scale屬性目前只有 Firefox, Safari/Chrome以及 opera 10.50 支持，到目前為止沒有一個IE版本支持。縮放一個對象是相當有意義的設計選擇。它可以通過漸進增強來使用:hover，這可以在你的導航上添加一個小小的趣味。

      #nav li a:hover{
	/* 這可以讓你的導航鏈接在鼠標經過的時候輕微的放大 */ 
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1); 
	-o-transform: scale(1.1); 
	}
    

translate

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

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

瀏覽器支持

translate屬性目前只被 Firefox, Safari/Chrome和Oprea 10.5 支持，而且還要使用瀏覽器的私有前綴-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); 
	-o-transform: skew(30deg, -10deg); 
}
    

瀏覽器支持

Skew屬性目前只被 Firefox, Safari/Chrome和Oprea 10.5 支持，而且還要使用瀏覽器的私有前綴-moz- 和-webkit-。

Matrix

沒錯，Matrix就是矩陣，矩陣是高等數學中非常基礎的一個東東，而在CSS 3中確實一個相當高級的功能，CSS 3引入matrix函數，可以非常靈活的實現上述的各種效果。它有6個參數(a,b,c,d,e,f)，它事實上是一個3*3矩陣，經過該矩陣將舊的參數轉換成新值：
| 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); 
	-o-transform: matrix(1, -0.2, 0, 1, 0, 0); 
}
    

瀏覽器支持

可喜的是，IE支持 matrix濾鏡 ，雖然它不支持大部分CSS3變形功能，但是使用它的這個濾鏡，基本也可以實現相同的效果，不過，你要先搞明白矩陣運算再說。webkit和Firefox(3.5+)、Opera 10.5都支持該功能。

鏈式變形

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

      #nav{
	-moz-transform: translate(10, 25); 
	-webkit-transform: translate(10, 25); 
	-o-transform: translate(10, 25); 
	-moz-transform: rotate(90deg); 
	-webkit-transform: rotate(90deg); 
	-o-transform: rotate(90deg); 
	-moz-transform: scale(2, 1); 
	-webkit-transform: scale(2, 1); 
	-o-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); 
	-o-transform: translate(10, 25) rotate(90deg) scale(2, 1); 
	}
    

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;
-o-transform-origin: 0 0;
...
}
.class2{-moz-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
...}
.class3{-moz-transform-origin:top left;
-webkit-transform-origin:top left;
-o-transform-origin:top left;
...}
    

瀏覽器兼容性

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

transition(轉換)

一個涉及到CSS屬性的基本的轉換就是定義和移動一個元素從它的靜止狀態(比如，深藍色背景)到它的hover或者激活狀態(比如，淺藍色背景)。

轉換可以和變形同時使用(以及引發諸如:hover 或:focus事件)以創建一些動畫。淡出背景色彩，滑動一個元素以及讓一個對象旋轉都可以通過CSS轉換實現。

      #nav a{ background-color:red; }
	#nav a:hover, #nav a:focus{
		background-color:blue;
		/* 告訴轉換去應用到background-color 屬性(看起來像一個CSS 參數，不是嗎？ #foreshadowing)*/
		-webkit-transition-property:background-color;
		-o-transition-property:background-color;
		/* 讓它持續兩秒鐘*/
		-webkit-transition-duration:2s;
		-o-transition-duration:2s;
}
    

轉換的一些參數

• transition-property

  指定轉換的CSS屬性名稱，比如，上面的例子中，將轉換應用于background-color屬性。

• transition-duration

  定義轉換花費的時間（從舊屬性換到新屬性花費的時間）

• transition-timing-function

  可以理解為過度效果。指定轉換過程中的中間值。可以用cubic-bezier指定。當然有幾個常用的內置值：ease | linear | ease-in | ease-out | ease-in-out

• transition-delay

  這個比較容易理解，就是轉換延遲的時間。時間可以為正整數、負整數和零，非零的時候必須設置單位是s(秒)或者ms(毫秒)，為負數的時候，轉換的動作會從該時間點開始顯示，之前的動作被截斷。

注：參數部分為 前端觀察 翻譯時添加，原文中沒有。

瀏覽器支持

像transform屬性一樣酷，但是目前只有 WebKit 瀏覽器支持。Opera 10.5 pre版本也可以通過添加-o-前綴來支持。-moz-transition已經在最近的nightly-build版本的Firefox 3.7中可用。你也可以添加-moz-transition到你的CSS中以實現將來的增強。甚至可以添加一個不用私有前綴的屬性，以防萬一。

Animation

動畫是CSS 3最有用的地方。你可以將我們在上面討論的所有的元素與動畫屬性比如animation-duration、animation-name 和animation-timing-function整合以創建像Flash動畫一樣的效果——純CSS。

      #rotate {
	margin: 0 auto;
	width: 600px;
	height: 400px; 
	/* 確保我們是在一個 3-D 空間 */
	-webkit-transform-style: preserve-3d;
	/*讓整個行使用x-軸旋轉、7秒中的動畫、無限次播放以及線性 */
	-webkit-animation-name: x-spin;
	-webkit-animation-duration: 7s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear; 
}
	/* 定義要調用的動畫 */
@-webkit-keyframes x-spin { 
	0% { -webkit-transform: rotateX(0deg); } 
	50% { -webkit-transform: rotateX(180deg); }
	100% { -webkit-transform: rotateX(360deg); } 
}