CODEWITHSUNDEEP
javascripthtmlcss
devzone
devzone

Reputation: 305

How to create a rotating wheel with images in Javascript?

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.

Upvotes: 4

Views: 7062

Answers (2)

Hemlock
Hemlock

Reputation: 6210

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.net/t2fEW/

Upvotes: 1

Joe
Joe

Reputation: 82624

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)

Upvotes: 2

Related Questions