My div box features a rounded image that I want to roll like a ball on the floor after the page loads. After rolling, I want to position the image perfectly at the center of the box.
css:
#box{width:900px;height:150px;position:relative;background:red;overflow:hidden;}
.ball{width:150px;height:150px;position;absolute;bottom:0;right:-150px;background:green;}
.ball img{display:block;width:100%;height:100%;border-radius:50%;}
html:
<div id="box">
<div class="ball><img src="http://blog.wiziq.com/wp-content/uploads/2013/11/5-150x150.png"</div>
</div>
Can someone assist me in creating a rolling ball effect using CSS3/jQuery?
My edit:
css:
.ball{
position:absolute;width:150px;height:150px;right:-150px;
-moz-transition:all 5s ease;
-webkit-transition:all 5s ease;
-o-transition:all 5s ease;
-ms-transition:all 5s ease;
transition:all 5s ease;
}
.rotate{-moz-transform:rotate(-940deg);
-webkit-transform:rotate(-940deg);
-o-transform:rotate(-940deg);
-ms-transform:rotate(-940deg);
transform:rotate(-940deg);}
js:
$('.ball').animate({'right':375}, {duration:500});
$('.ball').addClass('rotate');
Now I need help calculating the precise angle and right position for the ball outside the div box, so the rolling stops perfectly in the middle of the box. Please assist me with this challenge.