滚动时的CSS3转换

有谁知道一个很好的教程来实现这一目标？ （如下所示： http ： //www.contrastrebellion.com/ ）我已经查看了该网站上使用的代码，发现它很难取出我需要的东西。

非常感谢，谢谢

编辑：也在这里看到： http ： //playgroundinc.com/

我想要实现的目标：

在我向下滚动时旋转png和旋转速度以匹配滚动速度。

Answer 1

这应该让你朝着正确的方向前进： http ： //www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/ 。

干得好 ：

用于在滚动上设置旋转动画。

http://jsfiddle.net/EnSkJ/2/

代码：

var sdegree = 0; $(window).scroll(function() { sdegree ++ ; sdegree = sdegree + 3 ; var srotate = "rotate(" + sdegree + "deg)"; $("img").css({"-moz-transform" : srotate, "-webkit-transform" : srotate}); }); 

Answer 2

首先，看看这个网站 ，享受体验。 我想你在项目中要求这样的经验。 在该页面的末尾，您将看到一个jquery插件，用于在您的项目（站点）中实现该插件。 希望它能解决你的问题。

Answer 3

你当然可以使用像Infra Stank这样的简单方法。 但是，如果你需要一个更复杂的东西来“动画”尝试jQuery Transe 。 对于这个问题，它是一个彻底的解决方案。 您可以根据当前滚动偏移（甚至CSS3-Transforms等）更改几乎任何内容。

在你的情况下，尝试这样的事情：

 $('img').transe({ start: 0, end: 1600, css: 'transform', from: 'rotate(0deg)', to: 'rotate(360deg)' }); 

演示

顺便说一句：如果你喜欢平滑的东西，你可以将TweenLite包含在其CSS插件中。