Css 在水平滚动上旋转图像

我使用这段代码让图像在滚动上旋转，效果很好：

    <script>
$(window).scroll(function() {
var theta = $(window).scrollTop() % Math.PI;
$('#leftgear').css({ transform: 'rotate(' + theta + 'rad)' });
$('#rightgear').css({ transform: 'rotate(-' + theta + 'rad)' });
});
</script>

$（窗口）。滚动（函数（）{
var theta=$（窗口）.scrollTop（）%Math.PI；
$（'#leftgear'）.css（{transform:'rotate（'+theta+'rad'））}）；
$（'#rightgear'）.css（{transform:'rotate（-theta+'rad）}）；
});

我使用.scrollLeft而不是.scrollTop，因为我的站点是水平滚动的。我从以下地方获得此代码：

该站点上的示例有两幅图像。他们以不同的速度向相反的方向转动。我怎样才能做到这一点？我查看了演示站点的de源代码，注意到-webkit转换。我想这和它有关吧？有人能帮忙吗

---

我希望我的图像转向另一边，我希望它以较慢的速度旋转

非常简单，只需对每个元素应用不同的变换即可。在您给出的示例中，

#rightgear

元素旋转

-theta

rads，而

#leftgear

元素旋转

theta

rads。您可以对其中一个应用一个小的修改器来更改速度，如：

<script>
    $(window).scroll(function() {
        var theta = $(window).scrollTop() % Math.PI;
        $('#leftgear').css({ transform: 'rotate(' + theta + 'rad)' });
        $('#rightgear').css({ transform: 'rotate(-' + theta + 'rad)' });
        $('#slowgear').css({ transform: 'rotate(' + 0.25*theta + 'rad)' });
        $('#fastgear').css({ transform: 'rotate(' + 10*theta + 'rad)' });
    });
</script>

$（窗口）。滚动（函数（）{
var theta=$（窗口）.scrollTop（）%Math.PI；
$（'#leftgear'）.css（{transform:'rotate（'+theta+'rad'））}）；
$（'#rightgear'）.css（{transform:'rotate（-theta+'rad）}）；
$（'#slowgear'）.css（{transform:'rotate（'+0.25*theta+'rad'））}）；
$（'#fastgear'）.css（{transform:'rotate（'+10*theta+'rad'））}）；
});