如何在使用CSS变换滚动时旋转图像？ [英] How to rotate image when scrolling using CSS transform?

问题描述

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

I'm not sure how to use using jQuery, but has a CSS3 property: transform: rotate

它可以与jQuery一起使用

it could be used along with jQuery?

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

JSFIDDLE

推荐答案

尝试这个小提琴：

http://jsfiddle.net/kDSqB/

这不是100％准确的工作完全旋转，但我认为，晚上是小费的环境。

It's not 100% accurate in working out full rotation, but I think that night be the fiddle environment.

这里的代码：

var $cog = $('#cog'),
$body = $(document.body),
bodyHeight = $body.height();

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

这篇关于如何在使用CSS变换滚动时旋转图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！