Постоянное перемещение элемента
 

Доброго времени суток, и да... снова проблема с прудом, точнее с утятами которых я туда закинул:) . Нужно чтобы элементы постоянно перемещались по "пруду" и желательно, чтобы при касании боковых границ они поворачивались в противоположную сторону (scaleX(-1)). Подскажите как такое можно реализовать?

$('.hide-all').click(function spawnStarting() {
    var DUCK1_COUNT = $(".count1").html();
//Копаем пруд
    var $pond, pondWidth, pondHeight;
    $pond = $("<div class='pond'/>").appendTo('body');
    $("<div class='messenge'>Сообщения</div>").appendTo('body');
     pondWidth = $pond.width();
     pondHeight = $pond.height();

//Спаун уток
    for (var i = 0; i < DUCK1_COUNT; i++) {
        var DUCK = $("<img src='img/004-duck.png' class='utka plav'>").appendTo(".pond")
        .addClass('Krykvi'+i);
        var transform = 'translate(' + getRandom(pondWidth)+ 'px, ' +  getRandom(pondHeight)  + 'px)'
         if (getRandomIn(3, 6) < 5) {
           transform += " scaleX(-1)"
        }
        DUCK.css('transform', transform);
  }
});

//Функция для рандомного числа
function getRandomIn(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getRandom(upper) {
  return Math.random() * upper;
}

Получилось сделать перемещение, но они теряют свойство scaleX(-1):-?

setInterval (function(){
    for (var i = 0; i < DUCK1_COUNT; i++){
    $('.Krykvi'+i).css({
  'transform' : 'translate('+ getRandom(pondWidth) +'px, '+ getRandom(pondHeight) +'px)'
});
}
  }, 5000);

Не актуально