I am in the progress to make a roulette game, but i got a problem that my "animation"(or what you call it) only is able to play once. I dont have so much experiense with javascript and have no idea how to fix my problem.
var img = document.querySelector('#ball');
ball.addEventListener('click', onClick, false);
function onClick() {
this.removeAttribute('style');
var deg = 1080;
var css = '-webkit-transform: rotate(' + deg + 'deg);';
this.setAttribute(
'style', css
);
}
.roulette {
padding-top: 5em;
padding-left: 5em;
}
.roulette img {
position: absolute;
height: 50em;
}
.ball {
z-index: 1;
}
.border {
z-index: 1;
}
#ball {
-webkit-transition: -webkit-transform 4s ease-out;
z-index: 1;
}
<h1>Press the ball</h1>
<div class="roulette">
<img class="border" src="http://www.mediafire.com/convkey/0a20/z78myz6x2nk17n76g.jpg">
<img id="ball" src="http://www.mediafire.com/convkey/8eec/69mn483g0moovs66g.jpg">
<img class="wheel" id="spin2" src="http://www.mediafire.com/convkey/937f/f4f65gia76l409u6g.jpg">
</div>