jQuery转换旋转不按预期运行

Question

我试图在鼠标悬停时将元素顺时针旋转90度，然后将其返回到mouseout上的原始位置。

实现这一点很简单，但是当我尝试使用.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;
}