CSS3：翻译vs. translationX

Question

I was looking over the source code to swipe.js , a cross-browser library for creating animated slideshows on devices that support touch.

To create the animation, swipe.js uses CSS3 transforms (and falls back on Javascript animation if it has to.) So, the translate function they use to do the actual CSS3 transform is:

 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)';

  }

So, basically in order to make this cross-browser, they have to set different transform properties for Webkit, Mozilla, Microsoft and Opera. What I don't understand is why they use the translate function (which takes two arguments) for webkit, and the single-argument translateX function for everything else.

As far as I can see from the Mozilla and Microsoft documentation, both engines support translate as well as translateX . Is there some reason the author of swipe.js decided to use translateX for non-webkit browsers here? Is there actually some browser out there that supports translateX but NOT translate ?

Answer 1

Looks like this has historical reasons, by the time support for Firefox, Opera and IE was added , they all supported only 2d transforms . Support for 3d transforms was added a few months later in firefox , and IE10 also supports it, so it's actually only still neccessary for Opera, but I guess it's left there for backwards compatibility.

Update

Oops, thought I've read translate3d , but in the later verions it's only translate , just like you've posted it. So, it looks like they've changed to translate + translateZ because translate3d would no longer trigger hardware acceleration in iOS6 , maybe there are similar problems with translateX .