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 Demo for mobile devices

Answer 2

translateX和translateY比left，right，top，bottom和jQuery动画版本更流畅。 有关演示的详细信息，请参阅此内容：

http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/