CSS3:翻译与translateX

Question

我正在查看swipe.js的源代码，这是一个跨浏览器库，用于在支持触摸的设备上创建动画幻灯片。

为了创建动画，swipe.js使用CSS3转换(如果有必要的话，它会返回Javascript动画)。因此，他们用来执行实际CSS3转换的转换函数是：

 function translate(index, dist, speed) {

    var slide = slides[index];
    var style = slide && slide.style;

    if (!style) return;

    style.webkitTransitionDuration =
    style.MozTransitionDuration =
    style.msTransitionDuration =
    style.OTransitionDuration =
    style.transitionDuration = speed + 'ms';

    style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)';
    style.msTransform =
    style.MozTransform =
    style.OTransform = 'translateX(' + dist + 'px)';

  }

因此，基本上，为了使这个跨浏览器，他们必须为Webkit，Mozilla，Microsoft和Opera设置不同的转换属性。我不明白的是，为什么他们在webkit中使用translate函数(它需要两个参数)，而其他所有东西都使用单参数translateX函数。

据我从Mozilla和微软文档中可以看出，这两个引擎都支持translate和translateX。swipe.js的作者在这里决定在非webkit浏览器上使用translateX有什么原因吗？是否有某种浏览器支持translateX，但不支持translate？

Answer 1

看起来这是有历史原因的，到了增加了对Firefox、Opera和IE的支持的时候，他们都是只支持2d转换。对3d转换的支持是几个月后在firefox中添加了，而IE10也支持它，因此实际上它仍然是Opera所必需的，但我想它是为了向后兼容性而保留的。

更新

哎呀，我还以为我读过translate3d，但在后来的版本中，它只是translate，就像你发布的一样。所以，看起来他们有translateZ，因为translate3d会不再触发iOS6中的硬件加速，也许translateX也有类似的问题。