translate3d

translate3d是CSS3的一個新的css屬性。目前只有webkit和mozilla以及較新的IE10支持CSS3，webkit支持得最好，moz次之，IE最差。所以目前CSS3的套用主要還是在iOS和android上會比較有前途，PC上支持較差。通過向量（vecotr) [tx,ty,tz],來實現一個3D的移動。

基本介紹

• 中文名：translate3d
• 外文名：translate3d
• 特色：例子中把背景設定成藍色
• 實質：藍色的偏移

舉例

以下片斷是translate3d的一個實用例子，例子中把背景設定成藍色，藍色的偏移，非常清晰的描述了translate3d的變化的效果。

1. div {
2. transform: translate3d(20px, -60px, 50px);
3. }

translate3d的運行效果

使用說明

以前如果要寫一個元素移動的動畫，通常我們會設定某元素位置為absolute，然後通過JS改變其top,left,right,bottom等屬性來實現動畫，現在可以使用css3 translate來做到這一點，而完全不需要設定position為absolute。另外，這裡提醒一下大家，使用css translate在android上相當杯具，而在iOS的mobile safari裡面使用，則transalte2d的效果遠遠不如translate3d，所以，如果需要在mobile safari裡面使用該屬性，建議使用translate3d(x,y,z)的形式，即使只是修改其中的X或者Y，也這樣寫。測試過使用translateX或者translateY，效果跟2d的一樣的差。而translate3d是webkit才支持的屬性，內部實現與2d不同，所以效果流暢很多。