transform:translateX vs left属性的转换.哪个有更好的表现？CSS

Question

我正在制作一个带有HTML和CSS3的幻灯片菜单 - 尤其是过渡.

我想知道什么是最佳实践/最佳性能水平滑动相对定位的div.当我点击一个按钮时,它会向我的div添加一个类.哪个班级更好？(注意我可以稍后添加所有浏览器前缀,此网站仅针对现代浏览器).

//option 1
.animate{
    -webkit-transition:all ease 0.3s;
    -webkit-transform:translateZ(200px);
}

//option 2
.animate{
    -webkit-transition:all ease 0.3s;
    left:200px;
}

谢谢

Answer 1

通过翻译进行的转换在移动设备上的表现更好!

编辑:这是一个现场演示.与过渡translateX,并translateY比更平滑top,bottom,left和right. 用于移动设备的jsFiddle演示