jQuery 变换旋转未按预期运行

【问题标题】：jQuery transform rotation not acting as expectedjQuery 变换旋转未按预期运行
【发布时间】：2015-06-23 08:34:43
【问题描述】：

我试图在鼠标悬停时将元素顺时针旋转 90 度，并在鼠标移出时将其返回到原来的位置。

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

这是一个jsfiddle，可以帮助您了解我想要什么。

【问题讨论】：

标签： jquery css webkit jquery-animate css-transforms

【解决方案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;
}

【讨论】：

非常感谢！简洁而完美的解决方案。