Search code examples
jquerycsswebkitjquery-animatecss-transforms

jQuery transform rotation not acting as expected

I am trying to rotate an element clockwise 90 degrees on mouseover, and return it to its original position on mouseout.

Making this happen is simple enough, but when I try to use the .animate() function to make it seem like a transition, nothing happens.

Here is a jsfiddle that may help you understand what I want.

Solution

  • You don't have to use .animate() just use .css() and 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;
}