jQuery 滚动时的 CSS3 转换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9113292/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 Transformation while scrolling
提问by malicedix
Does anyone know of a good tutorial to achieve this? (as seen here: http://www.contrastrebellion.com/) I've looked at the code used on that site and finding it awkward to pull out what I need.
有谁知道一个很好的教程来实现这一目标？（如此处所示：http: //www.contrastrebellion.com/）我查看了该站点上使用的代码，发现很难取出我需要的内容。
Much appreciated, Thanks
非常感谢，谢谢
Edit: Also seen here: http://playgroundinc.com/
编辑：也可以在这里看到：http: //playgroundinc.com/
What I want to achieve:
我想要达到的目标：
To rotate a png as I scroll down and the speed of rotation to match the speed of scrolling.
在我向下滚动时旋转 png，旋转速度与滚动速度相匹配。
回答by Infra Stank
This should get you going in the right direction : http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/.
这应该让你朝着正确的方向前进：http: //www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/。
Here you go :
干得好 ：
For animating the rotation on scroll .
用于动画 scroll 上的旋转。
Code :
代码 ：
var sdegree = 0;
$(window).scroll(function() {
sdegree ++ ;
sdegree = sdegree + 3 ;
var srotate = "rotate(" + sdegree + "deg)";
$("img").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
});
回答by mukilane
First of all, have a look at this siteand enjoy the experience. I think you asked for such an experience in your project. At the end of that page you will see a jquery plugin to implement that in your project(site). Hope it solves your problem.
首先，看看这个网站并享受体验。我想你在你的项目中要求这样的经验。在该页面的末尾，您将看到一个 jquery 插件来在您的项目（站点）中实现它。希望它能解决你的问题。
回答by yckart
You can of course use a simple way like Infra Stank's answer. However if you need a more complex thing to "animate"try jQuery Transe. It is a thoroughsolution for exactly this problem. You can change almost anything based on the current scroll offset (even CSS3-Transforms and suchlike).
您当然可以使用像Infra Stank's answer这样的简单方法。但是，如果您需要更复杂的东西来“制作动画”，请尝试使用jQuery Transe。对于这个问题，它是一个彻底的解决方案。您可以根据当前的滚动偏移量（甚至 CSS3-Transforms 等）更改几乎任何内容。
In your case, try something like this:
在你的情况下，尝试这样的事情：
$('img').transe({
start: 0,
end: 1600,
css: 'transform',
from: 'rotate(0deg)',
to: 'rotate(360deg)'
});
BTW: If you like smooth things, you can include TweenLitewith its CSS-Plugin.
顺便说一句：如果你喜欢流畅的东西，你可以在它的 CSS 插件中包含TweenLite。
