javascript - 如何在 js 或 css 中固定图像位置？我有摩天轮 我希望我所有的图像在旋转时都应该站立

Question

如何在 js 或 css 中固定图像位置？我有摩天轮 我希望我所有的图像在旋转时都应该是站立的位置。 我想成为这样的人:http://jsdo.it/proppy/plUk/fullscreen看到粉色三 Angular 形旋转的时候位置是固定的。

这是我的:http://letmespeakenglish.net/wheel/index.html

有什么帮助吗？欢迎提出任何建议。 感谢您的帮助。

Answer 1

这是一个有效的 example

好的，要解决您的问题，您必须反向旋转各个图像，因为整个轮子都在旋转。 因此，将您的脚本更改为此应该可以修复它:

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

看久了会觉得恶心。我的意思是摩天轮，不是代码。