html - How to create a rotating wheel with images in Javascript? - Stack Overflow

admin管理员组

文章数量:1418347

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

Share Improve this question Follow edited Sep 14, 2011 at 3:02 Mike Samuel 121k3030 gold badges227227 silver badges254254 bronze badges asked Sep 14, 2011 at 2:24 devzonedevzone 30511 gold badge1212 silver badges2525 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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/

本文标签： htmlHow to create a rotating wheel with images in JavascriptStack Overflow