Как создать вращающееся колесо с изображениями в Javascript?

Question

Привет, у меня есть изображение колеса обозрения. Он имеет 10 элементов, которые образуют большой круг (как колесо обозрения). Я хочу вращать круг с 8 <div> с. Как я могу сделать это в JavaScript или HTML5?

Что-то вроде этого . Но мне нужно, чтобы розовый был площадью <div>, чтобы я мог нанести на него изображение. Любые предложения и помощь очень приветствуются.

Answer 1

Вот пример . Использование кросс-браузерного подхода.

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)

Answer 2

Очень похоже на IAbstractDownvoteFactory, но все CSS.Я написал это для браузеров webkit, чтобы заставить других работать, это очевидно, но потребуется много копий-вставок.

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