Javascript 在 jQuery 中使用 css 转换属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10808096/
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
Using css transform property in jQuery
提问by ndesign11
How can you specify cross-browser transform controls using jQuery since each browser seems to use its own methodology?
您如何使用 jQuery 指定跨浏览器转换控件，因为每个浏览器似乎都使用自己的方法？
Here is the code I am using for Firefox but I can't even get it to work. I think it's because there is no way to tell which transformation – scale, rotate, skew – to use.
这是我用于 Firefox 的代码，但我什至无法让它工作。我认为这是因为无法确定使用哪种变换——缩放、旋转、倾斜——。
$(".oSlider-rotate").slider({
min: 10,
max: 74,
step: .01,
value: 24,
slide: function(e,ui){
$('.user-text').css('transform', ui.value)
}
});
回答by Christian
If you want to use a specific transform function, then all you need to do is include that function in the value. For example:
如果您想使用特定的转换函数，那么您需要做的就是在值中包含该函数。例如：
$('.user-text').css('transform', 'scale(' + ui.value + ')');
Secondly, browser support is getting better, but you'll probably still need to use vendor prefixes like so:
其次，浏览器支持越来越好，但您可能仍然需要使用供应商前缀，如下所示：
$('.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 with example: http://jsfiddle.net/jehka/230/
jsFiddle 示例：http: //jsfiddle.net/jehka/230/
回答by Keith
Setting a -vendorprefix that isn't supported in older browsers can cause them to throw an exception with .css. Instead detect the supported prefix first:
设置-vendor旧浏览器不支持的前缀可能会导致它们抛出异常.css。而是首先检测支持的前缀：
// 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)
That works in old browsers. I've done scalehere but you could replace it with whatever other transform you wanted.
这适用于旧浏览器。我已经在scale这里完成了，但是您可以将其替换为您想要的任何其他转换。
回答by Monero Jeanniton
If you're using jquery, jquery.transit is very simple and powerful lib that allows you to make your transformation while handling cross-browser compability for you.
It can be as simple as this : $("#element").transition({x:'90px'}).
如果您使用 jquery，jquery.transit 是非常简单和强大的库，它允许您在处理跨浏览器兼容性的同时进行转换。它可以像这样简单：$("#element").transition({x:'90px'})。
Take it from this link : http://ricostacruz.com/jquery.transit/
从这个链接中获取它：http: //ricostacruz.com/jquery.transit/
回答by Philip Jespersen
I started using the 'prefix-free' Script available at http://leaverou.github.io/prefixfreeso I don't have to take care about the vendor prefixes. It neatly takes care of setting the correct vendor prefix behind the scenes for you. Plus a jQuery Plugin is available as well so one can still use jQuery's .css() method without code changes, so the suggested line in combination with prefix-free would be all you need:
我开始使用http://leaverou.github.io/prefixfree提供的“无前缀”脚本，因此我不必关心供应商前缀。它巧妙地为您在幕后设置正确的供应商前缀。另外还提供了一个 jQuery 插件，因此您仍然可以使用 jQuery 的 .css() 方法而无需更改代码，因此建议行与无前缀组合将是您所需要的：
$('.user-text').css('transform', 'scale(' + ui.value + ')');
回答by Amanverma Lucky
$(".oSlider-rotate").slider({
min: 10,
max: 74,
step: .01,
value: 24,
slide: function(e,ui){
$('.user-text').css('transform', 'scale(' + ui.value + ')')
}
});
This will solve the issue
这将解决问题
