Hi I have ferris wheel graphic. It has 10 elements that forms a big circle (like a ferris wheel). I want to rotate the circle with 8 <div>s. How can I do that in javascript or HTML5?

Something like this. But I need the pink to be a <div> area so that I can put image on it. Any suggestions&help are very much appreciated.

Hi I have ferris wheel graphic. It has 10 elements that forms a big circle (like a ferris wheel). I want to rotate the circle with 8 <div>s. How can I do that in javascript or HTML5?

Something like this. But I need the pink to be a <div> area so that I can put image on it. Any suggestions&help are very much appreciated.

• javascript
• html
• css

• 2 Perish wheel? You mean ferris wheel? – epascarello Commented Sep 14, 2011 at 2:41
• Do have any experienced doing it? – devzone Commented Sep 14, 2011 at 2:44

2 Answers 2

Here's 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)

Very similar to IAbstractDownvoteFactory's, but all CSS. I wrote it for webkit browsers, getting the others to work should be evident but will require 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/t2fEW/