Jquery

Hi Aniket,

 

Refer the link :http://jsfiddle.net/KarthikeyanK/wsL9cydy/#

 

 

If it is useful then accept my answer

Sir, 

I have written the following code,the wheel is rotating,and it stops at a random number,but the rotation occurs as first it rotates slow,then fast,then slows down and stops.instead of that i want it to rotate first fast,then slow down and stop at the random number.duration given is 6000 because i want it to rotate it for 6 seconds,which is also rotating. 

Yeah Okay Aniket..I hope it useful for you..

 

Happy coding

 

Cheers!!

 

Hi Aniket sir,

 

If it is useful then accept my answer

 

Karthikeyan K

Hi sir,

 

 

 

 

 

@keyframes circle {
from { transform:rotate(0deg); }
to { transform:rotate(360deg); }
}

body {
background-color: Aquamarine;
}
@keyframes inner-circle {
from { transform:rotate(0deg); }
to { transform:rotate(-360deg); }
}

#rot {
width:350px;
height:350px;
margin:20px auto;
font-size:16px;
line-height:1;
animation: circle 25s linear infinite;
transform-origin: 50% 50%;
}

#rot > div {
animation: inner-circle 25s linear infinite;
width:50px;
height:50px;
}

 

 JQUERY

 

$("document").ready(function(){
var block = $("#rot div").get(),
increase = Math.PI * 2 / block.length,
x = 0, y = 0, angle = 0;

for (var i = 0; i < block.length; i++) {
var elem = block[i];
x = 140 * Math.cos(angle) + 150;
y = 140 * Math.sin(angle) + 150;
elem.style.position = 'absolute';
elem.style.left = x + 'px';
elem.style.top = y + 'px';
var rot = 90 + (i * (360 / block.length));
angle += increase;
}

});