Question

嗨，我有摩天轮图形。它有10个元素形成一个大圆圈（如摩天轮）。我想用8 <div> s旋转圆圈。我怎么能用javascript或HTML5做到这一点？

像this之类的东西。但我需要将粉红色作为<div>区域，以便我可以将图像放在上面。任何建议和帮助都非常感谢。

Answer 1

这是一个example。使用相当跨浏览器的方法。

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＆＃39; s，但所有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/

如何在Javascript中创建带图像的旋转轮？

2 个答案: