Question

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

这是我的：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>

当你长时间看它时，你会感到恶心。我的意思是摩天轮，而不是代码。

Answer 2

不确定这是否能解决您的问题，但我可以看到您每隔500毫秒旋转一次图像：这是一个很大的延迟。试试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)

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

2 个答案: