jQuery 变换旋转未按预期运行

Question

我试图在鼠标悬停时顺时针旋转一个元素 90 度，然后return它在鼠标移开时回到原来的位置。

实现这个很简单，但是当我尝试使用 .animate() 函数让它看起来像一个过渡时，什么也没有发生。

这里有一个jsfiddle可以帮助你理解我想要什么。

Answer 1

您不必使用 .animate() 只需使用 .css() 和 CSS3。

DEMO

$('i.brand').hover(function () {
      rotation += 90;
      $(this).animateRotate(rotation);
 }, function () {
      rotation -= 90;
      $(this).animateRotate(rotation);
 });

CSS

.brand{
    -webkit-transition: all ease 1s;
    transition: all ease 1s;
}