在jQuery中使用CSS转换属性

你怎么能指定使用jQuery的跨浏览器转换控件，因为每个浏览器似乎使用自己的方法？

这里是我用于Firefox的代码，但我甚至不能得到它的工作。 我想这是因为没有办法知道使用哪种转换 – 缩放，旋转，倾斜 – 。

$(".oSlider-rotate").slider({ min: 10, max: 74, step: .01, value: 24, slide: function(e,ui){ $('.user-text').css('transform', ui.value) } }); 

Answer 1

如果你想使用一个特定的转换函数，那么你所要做的就是在该值中包含该函数。 例如：

 $('.user-text').css('transform', 'scale(' + ui.value + ')'); 

其次，浏览器支持正在变得越来越好，但是您可能仍然需要使用供应商前缀，如下所示：

 $('.user-text').css({ '-webkit-transform' : 'scale(' + ui.value + ')', '-moz-transform' : 'scale(' + ui.value + ')', '-ms-transform' : 'scale(' + ui.value + ')', '-o-transform' : 'scale(' + ui.value + ')', 'transform' : 'scale(' + ui.value + ')' }); 

用例子：jsFiddle： http : //jsfiddle.net/jehka/230/

Answer 2

设置旧版浏览器不支持的-vendor前缀可能会导致它们使用.css引发exception。 首先检测支持的前缀：

 // Start with a fall back var newCss = { 'zoom' : ui.value }; // Replace with transform, if supported if('WebkitTransform' in document.body.style) { newCss = { '-webkit-transform': 'scale(' + ui.value + ')'}; } // repeat for supported browsers else if('transform' in document.body.style) { newCss = { 'transform': 'scale(' + ui.value + ')'}; } // Set the CSS $('.user-text').css(newCss) 

这在旧的浏览器中起作用。 我已经在这里做了scale ，但你可以用任何你想要的其他变换replace它。

Answer 3

我开始使用http://leaverou.github.io/prefixfree上的“无前缀”脚本，所以我不必关心供应商前缀。; 它整齐地照顾在你的幕后设置正确的供应商前缀。 再加上一个jQuery插件也是可用的，所以人们仍然可以使用jQuery的.css（）方法，而不需要修改代码，所以build议的行与前缀无关将是你所需要的：

 $('.user-text').css('transform', 'scale(' + ui.value + ')'); 

Answer 4

如果您使用的是jquery，jquery.transit是非常简单而强大的lib，它允许您在为您处理跨浏览器兼容性时进行转换。 它可以像这样简单： $("#element").transition({x:'90px'}) 。

从这个链接： http : //ricostacruz.com/jquery.transit/