无法通过 CSS 使 ScrollTop 影响 Transform答案

【问题标题】：Couldnt make ScrollTop affect Transform via CSS无法通过 CSS 使 ScrollTop 影响 Transform
【发布时间】：2014-07-10 20:08:16
【问题描述】：

我试图让一个球（半径为 50% 的 div）随着用户的滚动向左滚动，我已经设法让他根据 ScrollTop 向左移动，但不能使变换以同样的方式工作，我哪里出错了？这是左工作和不转换的代码：

function parallax(){
    var scrolled = $(window).scrollTop();    
    $('.ball').css('left', (scrolled * 0.9) + 'px');
    $('.ball').css('transform', rotate(scrolled * 180) + 'deg');
}
$(window).scroll(function(e){
    parallax();
});

感谢您的回答！衬衫

【问题讨论】：

您只是缺少rotate(scrolled * 180) 上的引号吗？好像应该是'rotate(' + (scrolled * 180) + 'deg)'
您好，感谢您的快速响应，这也不起作用，之前尝试过，现在也尝试过，复制粘贴到您的行。它还使左侧无法工作..

标签： jquery css jquery-animate css-animations scrolltop

【解决方案1】：

jQuery 对 transform 属性的支持不是很好。

对于旋转，我建议使用 jQuery 旋转插件

https://code.google.com/p/jqueryrotate/

非常好用，语法是这样的

$('.ball').rotate(scrolled * 180)

【讨论】：

【解决方案2】：

试试This。希望对您有所帮助。

jquery：

$('.ball').toggleClass("rotate-180");

CSS：

.rotate-180 {
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

【讨论】：