How can I fixed image position in js or css ? I have ferris wheel I want my all the image should be standing position while rotating

How can I fixed image position in js or css ? I ha开发者_C百科ve ferris wheel I want my all the image should be standing position while rotating. I want to be like this : http://jsdo.it/proppy/plUk/fullscreen see the pink triangle The position is fixed while rotating .

here is mine : http://letmespeakenglish.net/wheel/index.html

Any help? Any suggestions are welcome. Thank you for your help.

Here's a working example

Alright, to solve your problem, you have to counter-rotate the individual images, as the entire wheel is spun. So, changing your script to this should fix it:

<script src="http://code.jquery.com/jquery-1.6.3.min.js" type="text/javascript"></script>  
<script>
    var rotation = 0
    setInterval(function() {
        $('div.#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 + 10) % 361
    }, 500);
</script>

You get kind of nauseous when you look at it for too long. The ferris wheel I mean, not the code.

Not sure if this will fix your problem, but I can see that you rotate your images at every 500ms: this is a big delay. Try it with 50ms.

    var rotation = 0
setInterval(function() {
    $('div.#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(1 deg)",
        "-webkit-transform": "rotate(1 deg)",
        "-o-transform": "rotate(1 deg)",
        "-ms-transform": "rotate(1 deg)"
    }); 

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