Question

我一直在研究CSS摩天轮动画。它看起来很好，但如果你密切关注，你会发现一些“步骤”将高于其他最高点（12点位置（代码中的“step1”））。我觉得我的数学有些不对劲，但我不知道到底是什么。

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

问题在于您的步进元素围绕其中心旋转，但是基于左上角定位。（see example）

您需要将旋转原点设置为与用于定位的旋转原点相同的点（顶部/左侧角落）

所以设置

transform-origin: top left;

表示.fa元素

（ with vendor prefixes ）

-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;

和循环关键帧（演示包含供应商前缀以及）

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

http://jsfiddle.net/gaby/Lc4qu/8/

演示

摩天轮动画

1 个答案: