使用CSS转换滚动时如何旋转图像？

我不确定如何使用jQuery，但有一个CSS3属性：transform：rotate

它可以与jQuery一起使用？

transform:rotate; -ms-transform:rotate; -webkit-transform:rotate; 

的jsfiddle

Answer 1

试试这个小提琴：

http://jsfiddle.net/kDSqB/

在完全旋转时，它并不是100％准确，但我认为那个夜晚是小提琴的环境。

这里的代码：

 var $cog = $('#cog'), $body = $(document.body), bodyHeight = $body.height(); $(window).scroll(function () { $cog.css({ 'transform': 'rotate(' + ($body.scrollTop() / bodyHeight * 360) + 'deg)' }); }); 

Answer 2

这是一个简单的jQuery示例，检查修改后的JSFiddle：

http://jsfiddle.net/g3k6h/5/

CSS将为我处理旋转> 360和<0，所以我甚至不打扰这样做并根据滚动的距离调整旋转值。 我并不担心试图考虑完整的旋转，以便在滚动速度和距离时更好地流动。 这个解决方案依赖于jQuery，但没有它就可以轻松完成。

 $(function() { var rotation = 0, scrollLoc = $(document).scrollTop(); $(window).scroll(function() { var newLoc = $(document).scrollTop(); var diff = scrollLoc - newLoc; rotation += diff, scrollLoc = newLoc; var rotationStr = "rotate(" + rotation + "deg)"; $(".gear").css({ "-webkit-transform": rotationStr, "-moz-transform": rotationStr, "transform": rotationStr }); }); }) 

Answer 3

我从OneOfOne的解决方案入手，并添加了动画。 在scroll事件上启动动画，用scroll结束它。 http://jsfiddle.net/g3k6h/4/

 var rotation = 0; var interval; var gear = $('.gear'); function animate() { gear.css('transform', 'rotate('+rotation+'deg)'); rotation += 10; rotation %= 360; } function startAnim() { if (!interval) { interval = setInterval(animate, 100); } } function stopAnim() { clearInterval(interval); interval = null; } $(document).scroll(startAnim).mouseup(stopAnim); 

jamesgauld的答案与我的类似，只是旋转量是基于滚动位置，我在滚动时只是保持旋转，这就是我理解这个问题的方式。

Answer 4

像这样的东西，jQuery应该使用正确的css3前缀。 http://jsfiddle.net/g3k6h/2/

 $(function() { $('.gear').click(function() { $(this).css('transform', 'rotate(30deg)'); }); });