Geek Answers Handbook

How to create a spinning wheel with images in javascript?

Hi, I have a Ferris wheel. It has 10 elements that form a large circle (for example, a Ferris wheel). I want to rotate a circle with 8 <div> s. How can I do this in javascript or HTML5?

Something like this . But I need pink to be the <div> so that I can put an image on it. Any suggestions and help are greatly appreciated.

+4
source share
2 answers

Here is an example . Using a fairly cross-browser approach.

 var rotation = 0 setInterval(function() { $('div').css({ "-moz-transform": "rotate(" + rotation + "deg)", "-webkit-transform": "rotate(" + rotation + "deg)", "-o-transform": "rotate(" + rotation + "deg)", "-ms-transform": "rotate(" + rotation + "deg)" }); rotation = (rotation + 10) % 361 }, 200)
+2
source

Very similar to IAbstractDownvoteFactory, but all CSS. I wrote it for webkit browsers to make others work, it should be obvious, but it will take a lot of copy-paste.

 .rotate-me { -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 8s; -webkit-animation-name: rotate; -webkit-animation-timing-function: linear; } @-webkit-keyframes rotate { 0% {-webkit-transform: rotate(0deg);} 100% {-webkit-transform: rotate(359deg);} }

http://jsfiddle.net/t2fEW/

+1
source

More articles:


All Articles