Transform in jQuery

Question

I\'m trying to get an element to animate a rotation hover effect using jquery, I have this jsFiddle going to test. So Far I have this:

$(\".icon\").hover(fun         


        

Answer 1

Probably the post is a bit outdated, but you do not need an additional plugin (this is if you do not wish to support IE 8 and below). I have sorted it out in the next way:

1) In the CSS of the HTML define the time of transformation:

.element {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

Then in your script do:

$(".element").css("-webkit-transform", "rotateY(90deg)");
$(".element").css("transform", "rotateY(90deg)");

This worked for me in Chrome, Firefox and Safari, I did not test it IE, but it should work in IE9 and greater.

Answer 2

The best jquery plugin to apply CSS transform across browser is jquery transform. It can also do animations and is available on Github with a detailed documentation.

Answer 3

Apart from IE9, all browsers that support transform also support transition, so you might be better off doing it without JS like this:

.icon {
    -webkit-transition:all 400ms;   
    -moz-transition:all 400ms;
    transition:all 400ms; 
    display:block;
    width:100px;
    height:100px;
    background-color:red    
}

.icon:hover {
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    transform:rotate(-90deg)
}

Example: http://jsfiddle.net/9CYET/14/

(I know it's not all the properties you wanted, but you get the idea! If you want to change height as well you'll need to set the transform-origin to the right place).

In IE9 that will rotate with no animation, and in older browsers nothing will happen. You could hack around with the filters for IE to get rotation in the really old IEs as well.