Geek Answers Handbook

Ferris wheel

I am working on CSS wheel wallpaper animation. It looks good, but if you pay close attention, you will see that some “steps” will be higher than others at the highest point (12-classic position (“step1” in the code)). I have a feeling that something is wrong in my math, but I don’t know what it is.

Here is the 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)

Thanks in advance!

+4
source share
1 answer

The problem is that your step elements rotate around their center, but are located based on the top / left corner. ( see example )

, (/ )

,

transform-origin: top left;

.fa

( )

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

animation: cycle 18s linear infinite;

#wheel add

animation: cycle 18s linear infinite reverse;

( )

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

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

+4

More articles:


All Articles