2018/02/08更新
translate3d和matrix3d的作用是強制調用GPU渲染效果，比CPU渲染的效果更好，同時也不會引起z軸位置的錯位。
首先要說明的是，這個問題並不是在所有瀏覽器下存在，而且也不是在所有chrome瀏覽器版本中存在。就目前chrome 62.0版本中，確實存在這個問題。
這個問題的現象是，首先定義了一個fixed元素（通常擁有較高的z-index），比如頂部的navbar，然後頁面中又有動畫元素，其動畫效果會改變z-index（變爲正值）。在這個動畫播放的過程中，如果navbar正好覆蓋，或部分覆蓋了這個元素，其z軸位置（注意不是z-index，而是z座標軸位置）就會發生變化。
這種變化的本質是動畫在播放時，覆蓋在上層的fixed元素，其Z軸位置會發生變化。動畫播放完畢，Z軸位置又會恢復。從頁面上來看，就是發生了抖動（z軸位置變近，也就是變爲正數，會讓元素看起來更大）。
解決方式很簡單，強制規定fixed元素的transform要有translateZ(固定值)，或者相似的屬性，比如translate3d(x,y,固定值)，常用translate3d(0,0,0)，
或者matrix3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4)（注意與c相關位，即第3,7,11,15個參數爲固定值）。
這種情況下，fixed元素的Z位置就不會發生動態變化。這個固定值通常爲0，這樣不會產生放遠（變小）或者放近（變大）的效果。