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

Question

我不确定如何使用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
    });
  });
})