在jQuery中转换
我正在尝试使用jquery获取一个元素来设置旋转hover效果，我有这个jsFiddle来测试。 到目前为止我有这个：
$(".icon").hover(function() { $(this).stop().animate({transform: "rotate(-90deg)", height: "200px"},400); },function() { $(this).stop().animate({backgroundColor : "black", color: "red"},400); }); 但它似乎根本没有旋转它，我意识到设置css的正确方法是：
-webkit-transform：rotate（30deg）;
我试过这个：
$(this).stop().animate({-webkit-transform: "rotate(-90deg)", height: "200px"},400);
但即使是高度也不会改变。 任何建议都会有所帮助！
链接到JSFiddle
使用优秀的jQuery Rotate插件。 http://code.google.com/p/jqueryrotate/ 。 它受到所有主流浏览器的支持
* Internet Explorer 6.0 > * Firefox 2.0 > * Safari 3 > * Opera 9 > * Google Chrome
要旋转图像，您需要做的就是$('#myImage').rotate(30) //for a 30 degree rotation其中#myImage是您想要旋转的元素的id。
要设置旋转动画，可以使用setTmeout ex：
setTimeout(function() { $('#myImage').rotate(30) },5)
除了IE9之外，所有支持转换的浏览器也支持转换，因此如果没有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) }
示例： http ： //jsfiddle.net/9CYET/14/
（我知道这不是你想要的所有属性，但你明白了！如果你想改变高度，你需要将变换原点设置到正确的位置）。
在没有动画的情况下旋转的IE9，在旧版浏览器中不会发生任何事情。 您可以使用IE的filter来破解真正的旧IE中的旋转。
在浏览器中应用CSS转换的最佳jquery插件是jquery转换 。 它也可以做动画，并在Github上提供详细的文档。
可能这篇文章有点过时，但你不需要额外的插件（如果你不想支持IE 8及以下版本）。 我已经按照下一个方式对其进行了整理：
1 ）在HTML的CSS中定义转换的时间：
.element { -webkit-transition: 0.3s; transition: 0.3s; }
然后在你的脚本中执行：
$(".element").css("-webkit-transform", "rotateY(90deg)"); $(".element").css("transform", "rotateY(90deg)");
这对我在Chrome，Firefox和Safari中有用，我没有测试它，但它应该在IE9和更高版本中工作。
jQuery animate不支持旋转（参见http://bugs.jquery.com/ticket/4171和jQuery文档 ）
此外，动画仅支持具有数值的CSS，这意味着动画颜色也不起作用。 哎呀，不知道jQuery UI增加了对颜色的支持。
如果你想在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)';
但是，这仅适用于现代浏览器，因此您必须使用jQuery.animate作为后备。
这是jQuery插件，处理这个：
https://github.com/benbarnett/jQuery-Animate-Enhanced
它只是覆盖jQuery.animate函数以使用css动画（如果可用），因此您不必担心跨浏览器问题，只需调用jQuery.animate并调用最佳可用方法。
我用它来衡量：
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 + ')' }); });
如果你正在使用jquery，jquery.transit是一个非常简单和强大的lib，它允许你在处理跨浏览器兼容性的同时进行转换。 它可以这么简单：$（“＃element”）。transition（{x：’90px’}）。 从以下链接获取： http ： //ricostacruz.com/jquery.transit/
jquery.transform.js是一个由Louis remi开发的jquery 2d转换插件。 它允许在jquery中使用像css这样的转换。 请访问此链接以获取有关如何使用它的一些说明。 使用此插件旋转元素的简单说明如下：
$(elem).animate({transform: 'rotate(135deg)'});