这里有什么特殊意义么，是不是完全可以用translateX()代替translate3d()啊？
认证高级PHP讲师
增加http://www.infoq.com/cn/artic...文章比较长，而且没看懂，摘一段
增加
文章比较长，而且没看懂，摘一段
...但我的第一猜測這麼做的原因是為了使用translate3d hack。簡單來說如果你給一個元素添加上了-webkit-transform: translateZ(0);或者-webkit-transform: translate3d(0,0,0);屬性，那麼你就等於告訴了瀏覽器用GPU來渲染該層，與一般的CPU渲染相比，提升了速度和性能。(我很確定這麼做會在Chrome中啟用了硬件加速，但在其他平台不做保證。就我得到的資料而言，在大多數瀏覽器比如Firefox、Safari也是適用的)。 但這樣的說法其實並不準確，至少在現在的Chrome版本中這算不上一個hack。因為默認渲染所有的網頁時都會經過GPU。那麼這麼做還有必要嗎？有。在理解原理之前，你必須先了解一個層(Layer)的概念。 html在瀏覽器中會被轉化為DOM樹，DOM樹的每一個節點都會轉化為RenderObject, 多個RenderObject可能又會對應一個或多個RenderLayer。瀏覽器渲染的流程如下： 獲取 DOM 並將其分割為多個層(RenderLayer) 將每個層柵格化，並獨立的繪製進位圖中 將這些位圖作為紋理上傳至 GPU 複合多個層來生成最終的屏幕圖像(終極layer)。 這和遊戲中的3D渲染類似，雖然我們看到的是一個立體的人物，但這個人物的皮膚是由不同的圖片“貼”和“拚”上去的。網頁比此還多了一個步驟，雖然最終的網頁是由多個位圖層合成的，但我們看到的隻是一個複印版，最終隻有一個層。當然有的層是無法拚合的，比如flash。
...但我的第一猜測這麼做的原因是為了使用translate3d hack。簡單來說如果你給一個元素添加上了-webkit-transform: translateZ(0);或者-webkit-transform: translate3d(0,0,0);屬性，那麼你就等於告訴了瀏覽器用GPU來渲染該層，與一般的CPU渲染相比，提升了速度和性能。(我很確定這麼做會在Chrome中啟用了硬件加速，但在其他平台不做保證。就我得到的資料而言，在大多數瀏覽器比如Firefox、Safari也是適用的)。
但這樣的說法其實並不準確，至少在現在的Chrome版本中這算不上一個hack。因為默認渲染所有的網頁時都會經過GPU。那麼這麼做還有必要嗎？有。在理解原理之前，你必須先了解一個層(Layer)的概念。
html在瀏覽器中會被轉化為DOM樹，DOM樹的每一個節點都會轉化為RenderObject, 多個RenderObject可能又會對應一個或多個RenderLayer。瀏覽器渲染的流程如下：
獲取 DOM 並將其分割為多個層(RenderLayer)
將每個層柵格化，並獨立的繪製進位圖中
將這些位圖作為紋理上傳至 GPU
複合多個層來生成最終的屏幕圖像(終極layer)。
這和遊戲中的3D渲染類似，雖然我們看到的是一個立體的人物，但這個人物的皮膚是由不同的圖片“貼”和“拚”上去的。網頁比此還多了一個步驟，雖然最終的網頁是由多個位圖層合成的，但我們看到的隻是一個複印版，最終隻有一個層。當然有的層是無法拚合的，比如flash。
2014-6-24 11:04:16
@bobscript @f2e
開啟3dGPU加速。 效果一樣，不過後者會觸發瀏覽器的硬件加速。這篇文章有詳解：http://cubefe.com/ipad_web_gp... 在支持css3的瀏覽器上開發js動畫還是比較輕鬆方便的。一般來說利用css3 translate來代替傳統的修改left和top實現動畫，某些情況下能會更好一點。具體原因是能夠減少瀏覽器repait量。經過實踐發現translate方法和left,top方法性能上相差無幾，都是很差的，全屏的動畫repait量無論如何都無法減小。
開啟3dGPU加速。
效果一樣，不過後者會觸發瀏覽器的硬件加速。這篇文章有詳解：http://cubefe.com/ipad_web_gp...
在支持css3的瀏覽器上開發js動畫還是比較輕鬆方便的。一般來說利用css3 translate來代替傳統的修改left和top實現動畫，某些情況下能會更好一點。具體原因是能夠減少瀏覽器repait量。經過實踐發現translate方法和left,top方法性能上相差無幾，都是很差的，全屏的動畫repait量無論如何都無法減小。
經過調研發現這種情況可以利用webkit的gpu加速渲染功能實現流暢的動畫效果，理論。簡單說下開啟gpu加速的一些方法：1,html5 video,bing首頁動態背景使用video的原因之一吧。2,transition 和 animation（在ipad上使用會開啟gpu加速)。3,-webkit-transform-style:preserve-3d; -webkit-transform: translate3d(0,0,0); 。4,給元素transform加上translateZ(0px),iScroll采用的方法。按照上述方法開啟gpu加速後，涉及到的區域就會被gpu直接渲染在屏幕對應區域，不用和瀏覽器進程共享內存和減輕cpu負擔是gpu加速的理論原理。帶來的問題：同時開啟gpu加速後也會帶來一些額外的問題，首要的應該是設備耗電量會增加，畢竟gpu也開始工作了。其次會出現一些渲染上麵的問題，例如被加速部分元素z-index值和未被加速部分之間將無法正常比較。被加速元素如果有position定位的子元素，這些子元素有可能無法渲染到被加速元素以外的區域——left設置成-10000px都會渲染成0px。pc上有些顯卡還會出現渲染bug，好在ipad上沒這個問題。
增加http://www.infoq.com/cn/artic...
文章比较长，而且没看懂，摘一段@bobscript @f2e
經過調研發現這種情況可以利用webkit的gpu加速渲染功能實現流暢的動畫效果，理論。
簡單說下開啟gpu加速的一些方法：
1,html5 video,bing首頁動態背景使用video的原因之一吧。
2,transition 和 animation（在ipad上使用會開啟gpu加速)。
3,-webkit-transform-style:preserve-3d; -webkit-transform: translate3d(0,0,0); 。
4,給元素transform加上translateZ(0px),iScroll采用的方法。
按照上述方法開啟gpu加速後，涉及到的區域就會被gpu直接渲染在屏幕對應區域，不用和瀏覽器進程共享內存和減輕cpu負擔是gpu加速的理論原理。
帶來的問題：
同時開啟gpu加速後也會帶來一些額外的問題，首要的應該是設備耗電量會增加，畢竟gpu也開始工作了。其次會出現一些渲染上麵的問題，例如被加速部分元素z-index值和未被加速部分之間將無法正常比較。被加速元素如果有position定位的子元素，這些子元素有可能無法渲染到被加速元素以外的區域——left設置成-10000px都會渲染成0px。pc上有些顯卡還會出現渲染bug，好在ipad上沒這個問題。