CODEWITHSUNDEEP
jquerycsswebkitjquery-animatecss-transforms
Zach
Zach

Reputation: 5113

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.

Upvotes: 0

Views: 56

Answers (1)

dowomenfart
dowomenfart

Reputation: 2803

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;
}

Upvotes: 1

Related Questions