在 jQuery 中转换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5610171/
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
Transform in jQuery
提问by Doug Molineux
I'm trying to get an element to animate a rotation hover effect using jquery, I have this jsFiddlegoing to test. So Far I have this:
我正在尝试使用 jquery 获取一个元素来为旋转悬停效果设置动画，我要测试这个jsFiddle。到目前为止，我有这个：
$(".icon").hover(function() {
$(this).stop().animate({transform: "rotate(-90deg)", height: "200px"},400);
},function() {
$(this).stop().animate({backgroundColor : "black", color: "red"},400);
});
But it doesn't seem to be rotating it at all, I realize the proper way to set the css is:
但它似乎根本没有旋转它，我意识到设置 css 的正确方法是：
-webkit-transform: rotate(30deg);
-webkit-transform：旋转（30度）；
I've tried this:
我试过这个：
$(this).stop().animate({-webkit-transform: "rotate(-90deg)", height: "200px"},400);
but then even the Height doesn't change. any advice would help thanks!
但即使高度也不会改变。任何建议都会有所帮助谢谢！
采纳答案by Hussein
Use the excellent jQuery Rotate plugin. http://code.google.com/p/jqueryrotate/. It is supported by all major browsers
使用优秀的 jQuery Rotate 插件。http://code.google.com/p/jqueryrotate/。所有主要浏览器都支持它
* Internet Explorer 6.0 >
* Firefox 2.0 >
* Safari 3 >
* Opera 9 >
* Google Chrome
To rotate an image, All you need to do is $('#myImage').rotate(30) //for a 30 degree rotationWhere #myImageis the id of the element you want rotated.
要旋转图像，您需要做的就是您要旋转的元素的 id$('#myImage').rotate(30) //for a 30 degree rotation在哪里#myImage。
To animate rotation, you can use setTmeout ex:
要动画旋转，您可以使用 setTmeout ex：
setTimeout(function() { $('#myImage').rotate(30) },5)
回答by Rich Bradshaw
Apart from IE9, all browsers that support transform also support transition, so you might be better off doing it without JS like this:
除了IE9，所有支持transform的浏览器也都支持transition，所以你最好不要像这样没有JS：
.icon {
-webkit-transition:all 400ms;
-moz-transition:all 400ms;
transition:all 400ms;
display:block;
width:100px;
height:100px;
background-color:red
}
.icon:hover {
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transform:rotate(-90deg)
}
Example: http://jsfiddle.net/9CYET/14/
示例：http: //jsfiddle.net/9CYET/14/
(I know it's not all the properties you wanted, but you get the idea! If you want to change height as well you'll need to set the transform-origin to the right place).
（我知道这不是您想要的所有属性，但您明白了！如果您还想更改高度，则需要将变换原点设置到正确的位置）。
In IE9 that will rotate with no animation, and in older browsers nothing will happen. You could hack around with the filters for IE to get rotation in the really old IEs as well.
在 IE9 中，它会在没有动画的情况下旋转，而在较旧的浏览器中则不会发生任何事情。您也可以使用 IE 的过滤器在真正的旧 IE 中进行旋转。
回答by Louis-Rémi
The best jquery plugin to apply CSS transform across browser is jquery transform. It can also do animations and is available on Githubwith a detailed documentation.
跨浏览器应用 CSS 转换的最佳 jquery 插件是jquery transform。它还可以做动画，并且可以在 Github上找到详细的文档。
回答by Emil Borconi
Probably the post is a bit outdated, but you do not need an additional plugin (this is if you do not wish to support IE 8 and below). I have sorted it out in the next way:
可能该帖子有点过时，但您不需要额外的插件（如果您不希望支持 IE 8 及以下版本）。我已经按照下一个方式对其进行了整理：
1) In the CSS of the HTML define the time of transformation:
1) 在 HTML 的 CSS 中定义转换时间：
.element {
-webkit-transition: 0.3s;
transition: 0.3s;
}
Then in your script do:
然后在您的脚本中执行以下操作：
$(".element").css("-webkit-transform", "rotateY(90deg)");
$(".element").css("transform", "rotateY(90deg)");
This worked for me in Chrome, Firefox and Safari, I did not test it IE, but it should work in IE9 and greater.
这在 Chrome、Firefox 和 Safari 中对我有用，我没有在 IE 上测试它，但它应该在 IE9 和更高版本中工作。
回答by Brankodd
If you want to animate something in css, you just have to set "transitionDuration" css property(no need for jQuery.animate), for example:
如果你想在 css 中设置动画，你只需要设置“transitionDuration”css 属性（不需要 jQuery.animate），例如：
var style = element.style;
style.webkitTransitionDuration = style.MozTransitionDuration = style.msTransitionDuration = style.OTransitionDuration = style.transitionDuration = '500ms';
style.MozTransform = style.webkitTransform = 'translate3d(100px,0,0)';
style.msTransform = style.OTransform = 'translateX(100px)';
However this will work only in modern browsers, so you have to use jQuery.animate as fallback.
但是，这仅适用于现代浏览器，因此您必须使用 jQuery.animate 作为后备。
Here is jQuery plugin which handling this:
这是处理此问题的jQuery插件：
https://github.com/benbarnett/jQuery-Animate-Enhanced
https://github.com/benbarnett/jQuery-Animate-Enhanced
It just overrides jQuery.animate function to use css animation if available, so you don't have to worry about cross browser issues, just call jQuery.animate and the best available method will be called.
如果可用，它只是覆盖 jQuery.animate 函数以使用 css 动画，因此您不必担心跨浏览器问题，只需调用 jQuery.animate 即可调用最佳可用方法。
回答by zdyn
jQuery animate doesn't support rotation (see http://bugs.jquery.com/ticket/4171and the jQuery documentation)
jQuery 动画不支持旋转（参见http://bugs.jquery.com/ticket/4171和jQuery 文档）
Also, only CSS with numerical values are supported for animate, meaning animating colors won't work either.Oops, was not aware jQuery UI added support for colors.
此外，动画仅支持带有数值的 CSS，这意味着动画颜色也不起作用。糟糕，不知道 jQuery UI 添加了对颜色的支持。
回答by Michael J. Calkins
I used this for scale:
我用这个来衡量：
var zoom_level = .4,
multiplier = .2;
$('button.zoom-in, button.zoom-out').click(function(){
zoom_level += $(this).hasClass('zoom-in') ? multiplier : -(multiplier);
$('.floor').css({
'-webkit-transform': 'scale(' + zoom_level + ')'
});
});
回答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'}). Take it from this link : http://ricostacruz.com/jquery.transit/
如果您使用 jquery，jquery.transit 是一个非常简单和强大的库，它允许您在处理跨浏览器兼容性的同时进行转换。它可以像这样简单：$("#element").transition({x:'90px'})。从这个链接中获取它：http: //ricostacruz.com/jquery.transit/
回答by Ani
jquery.transform.jsis a jquery 2d transform plugin developed by Louis remi. it allows to use transform like css in jquery. visit thislink for some illustrations on how to use it. A simple illustration to rotate an element using this plugin is as follows:
jquery.transform.js是 Louis remi开发的 jquery 2d 转换插件。它允许在 jquery 中使用像 css 一样的转换。访问此链接以获取有关如何使用它的一些插图。使用此插件旋转元素的简单说明如下：
$(elem).animate({transform: 'rotate(135deg)'});
