Home/ Questions/Q 6528593
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T09:32:56+00:00

I’d like to have a Wheel of Fortune effect. When user clicks the image,

  • 0

I’d like to have a “Wheel of Fortune” effect. When user clicks the image, it rotates random degrees (between 180-540 degrees) from its last position. Rotation should be done with CSS3. Here’s my code so far:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#pic {
    position: absolute;
    top: 200px;
    left: 200px;
}
@-webkit-keyframes spin
{
100% {-webkit-transform: rotateZ(300deg);}
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function animRes() {
  var $element = $("#pic").bind("webkitAnimationEnd", function(){
    this.style.webkitAnimationName = "";
  });
}
function doSpin() {
  animRes();
  $("#pic").css('-webkit-animation', 'spin 1s ease-out');
  $("#pic").css('-webkit-animation-fill-mode', 'forwards'); //doesn't work when using AnimRes()
}
</script>
</head>
<body>
<img id="pic" src="picture.jpg" alt="pic" onclick="doSpin();"/>
</body>
</html>

Problems are:
How to randomly change the value of rotation in keyframes?
How to continue rotation from its last position?

At the moment animRes() is reseting animation so the -webkit-animation-fill-mode: forwards doesn’t work but without animRes() I can’t reset the animation for more spins. Writing the answer with jQuery and plain JS is highly appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to get into some math to achieve what you want to do, hopefully it’s not too difficult to understand…

    var degrees=0, seconds=0, previousRotation=0;

$("#spinner").click(function(){
 previousRotation = degrees;
 degrees+= parseInt(Math.random() * 360 + 180);
  //you should adjust this formula
   miliseconds = parseInt((degrees - previousRotation)) * 5;
    $(this).css({
        "-webkit-transform" : "rotate("+ degrees +"deg)",
        "-webkit-transition-duration" : miliseconds + "ms"
    });
});

    I’m using CSS Transitions instead of animations because they are more simple.

    The miliseconds = … formula makes the transition last longer if there’s more degrees to be transitioned. Hopefully you can integrate all of this into the code you already wrote.

    You can see a demo here: http://jsfiddle.net/XkNrf/

    • 0