javascript - css translate が数学関数で機能しない

Question

4 つの長方形のボックスを sin/cos 関数に変換しようとしています。ただし、chrome/firefox では機能しません。ただし、IEでは機能します。以下はコードで、 jsfiddleでデモを見ることができます。

(function() {
    var circle = $(".circle"),
        circleChild = $(".circle-child", circle),
        circleChildLength = circleChild.find("li").length,
        isDragged = false,
        speed = 5,
        angles = [],
        initialDistance = 0,
        totalDistance = 150;

    function moveChildCircles() {
        initialDistance += speed;
        if(initialDistance >= totalDistance  || initialDistance <= 0) {
            speed = -speed; 
            isDragged = !isDragged;
        }

      /* This doesn't work, it works only when I set either translateX or translateY     (not both). */

        circleChild.find("li").each(function(i) {
            $(this).css("transform", "translate(" + initialDistance*Math.cos(angles[i]) + "px," + initialDistance*Math.sin(angles[i]) + "px)");
        });
    }

    circle.click(function() {
        var addAngle = Math.PI*2/circleChildLength;

        for(var i = 0; i < circleChildLength; i++) {
            angles[i] = i*addAngle;
        }   
        isDragged = !isDragged;
    });



    (function animate() {

        requestAnimationFrame(animate);
        if(isDragged) {
            moveChildCircles();
        }
    }());

}());

ご覧のとおり、これは translateX/translateY のいずれかに対してのみ機能します。これをデバッグすると、animate() メソッドは最初の li 値のみを更新します。なんで？