Rotate Ball Help Change

[Alexander_Stiopin]

The balls on example go from left to right. My question is how change the example script, to do that the balls will be go from right to left. Thanks (Here is example code)

html

<div id="gallery"><div id="balls"><div class="ball red"><div><span>2</span></div></div><div class="ball red"><div><span>14</span></div></div><div class="ball red"><div><span>18</span></div></div><div class="ball red"><div><span>19</span></div></div><div class="ball red"><div><span>25</span></div></div><div class="ball red"><div><span>30</span></div></div></div></div>

css

#gallery{
  background:#000000;
  position:relative;
  margin: 0 auto;
  overflow:hidden;
  width:660px;
  height:60px;
}
.ball{
    position:absolute;
    width:60px;
    height:60px;
    background:#004E99;
    border-radius:50%;
    box-shadow: 20px 30px 30px -10px rgba(0,0,0,0.4);
    
}
.ball>div{
    position:absolute;
    width:100%;
    height:100%;
    border-radius:50%;
}
.ball>div>span{
    position:absolute;
    left:23px;
    top:14px;
    width:30px;
    height:30px;
    border-radius:50%;
    text-align:center;
    line-height:30px;
    font-size:24px;
    font-weight:bold;
    background:#fff;
}
.ball.red{    background: radial-gradient(circle at 20px 20px, #f30, #001);}

JS

var $ball = $('#balls > div'),
    diameter = $ball.height(),
    perimeter = Math.PI * diameter,
		n = $ball.length,
        i = 0,
		itv;

itv = setInterval(function(){
	if(i>n)clearInterval(itv);
	rotateBall(600-(diameter*i) );
	i++;
},500);

function rotateBall(distance) {
  var degree = distance * 360 / perimeter;
	$ball.eq(i).css({
		transition: "2s cubic-bezier(1.000, 1.450, 0.185, 0.850)",
		transform: 'translateX('+ distance +'px)'
	}).find('div').css({
		transition: "2s cubic-bezier(1.000, 1.450, 0.185, 0.850)",
		transform: 'rotate('+ degree + 'px)'	
	});
}

And here is work example http://jsfiddle.net/Nazaret2005/fhcs6eua/show

[PaulOB]

Hi,

Try starting the ball at the right:

.ball{
   right:0;
}

Then perhaps use negative translate values.

    transform: 'translateX('+ '-' + distance +'px)'

[Alexander_Stiopin]

Thank you very much! )