CSS3：translate vs. translateX

Question

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

要创建动画，swipe.js使用CSS3变换（如果必须，则返回Javascript动画。）因此，他们用来进行实际CSS3变换的translate函数是：

 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和Microsoft文档中我可以看到，两个引擎都支持translate以及translateX。有没有理由swipe.js的作者决定在这里使用translateX非webkit浏览器？实际上是否有一些浏览器支持translateX但不支持translate？

Answer 1

这看起来有历史原因，到时候support for Firefox, Opera and IE was added，它们都是supported only 2d transforms。对3d变换的支持是added a few months later in firefox，IE10也支持它，所以它实际上只是Opera的必要条件，但我想这是为了向后兼容。

<强>更新

哎呀，我以为我读过translate3d，但在后来的版本中，它只是translate，就像你发布它一样。所以，看起来他们changed to translate + translateZ因为translate3d会no longer trigger hardware acceleration in iOS6，可能translateX存在类似的问题。