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

Question

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

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

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

Answer 1

这是一个工作示例

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

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

当你看它太久时，你会有点恶心。我的意思是摩天轮，而不是代码。

Answer 2

不确定这是否能解决您的问题，但我可以看到您每 500 毫秒旋转一次图像：这是一个很大的延迟。用 50 毫秒试试。

    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)