javascript - 摩天轮动画

Question

我一直在研究 CSS 摩天轮动画。它看起来不错，但如果你仔细观察，你会发现一些“台阶”在最高点(12 点钟位置(代码中的“step1”))会比其他台阶高。我感觉我的数学有问题，但我不知 Prop 体是什么。

这是 fiddle :http://jsfiddle.net/Lc4qu/

HTML

<div id="wheel" style="height:600px;width:600px;margin:0;postion:relative;">
    <div class="wheel a fa">step1</div>
    <div class="wheel b fa">step2</div>
    <div class="wheel c fa">step3</div>
    <div class="wheel d fa">step4</div>
    <div class="wheel e fa">step5</div>
    <div class="wheel f fa">step6</div>
    <div class="wheel g fa">step7</div>
    <div class="wheel h fa">step8</div>
    <div class="wheel i fa">step9</div>
    <div class="wheel j fa">step10</div>
    <div class="wheel k fa">step11</div>
    <div class="wheel l fa">step12</div>
</div>

CSS

#wheel
{
    font-size: 120%;

}

div .a
{
     left:300px;
     top: 0px; 
     position:absolute; 
}
div .b
{

     left:450px;
     top:60px; 
     position:absolute; 
}
div .c
{
     left:560px;
     top:150px; 
     position:absolute; 
}

div .d
{
    top:300px; 
    position:absolute;
    left:600px; 
}
div .e
{
     left:560px;
     top:450px; 
     position:absolute; 
}

div .f
{
     left:450px;
     top:560px; 
     position:absolute; 
}


div .g
{
    top:600px;
     left:300px; 
     position:absolute;  
}


div .h
{
    top:560px;
    left:150px;
     position:absolute;  
}
div .i
{
    top:450px;
    left:40px;
     position:absolute;  
}
div .j
{
    top: 300px; 
    left: 0;
    position:absolute; 
}
div .k
{
    top:150px;
    left:40px;
    position:absolute;  
}
div .l
{
     left:150px;
     top:40px; 
     position:absolute; 
}
.fa{float:left;width}

JQUERY

    var rotation = 0
setInterval(function() {
    $('#wheel').css({
        "-moz-transform": "rotate(-" + rotation + "deg)",
        "-webkit-transform": "rotate(-" + rotation + "deg)",
        "-o-transform": "rotate(-" + rotation + "deg)",
        "-ms-transform": "rotate(-" + rotation + "deg)"
    }); 

        $('.fa').css({
        "-moz-transform": "rotate(" + rotation + "deg)",
        "-webkit-transform": "rotate(" + rotation + "deg)",
        "-o-transform": "rotate(" + rotation + "deg)",
        "-ms-transform": "rotate(" + rotation + "deg)",
    }); 

 rotation = (rotation + 1) % 361
}, 50)

提前致谢!

Answer 1

问题是您的 step 元素围绕其中心旋转，但定位是基于上/左 Angular 。 ( see example )

您需要将旋转原点设置为与您用于定位的点相同(上 Angular/左 Angular )

如此设置

transform-origin: top left;

对于 .fa 元素

(带有 vendor 前缀)

-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-ms-transform-origin: top left;
-o-transform-origin: top left;
transform-origin: top left;

演示在 http://jsfiddle.net/gaby/Lc4qu/7/

---

更重要的是，您只需使用 CSS3(使用动画/关键帧)就可以实现同样的效果

像这样

为.fa元素添加

animation: cycle 18s linear infinite;

为外部#wheel添加

animation: cycle 18s linear infinite reverse;

和循环关键帧(演示也包含 vendor 前缀)

@keyframes cycle{
   0% { 
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

演示在 http://jsfiddle.net/gaby/Lc4qu/8/