Currently, I am working on a CSS ferris wheel animation concept. Everything seems to be in order visually, but upon closer inspection, some of the "steps" appear higher than others when at the highest point (12 o'clock position - referred to as "step1" in the code). It seems like there might be an issue with my calculations, but I'm having trouble pinpointing the exact problem.
If you'd like to take a look, here is the fiddle link: 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;
}
...
.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)
I appreciate any insights or help you can offer!