css - 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(function() {
        $(this).stop().animate({transform: "rotate(-90deg)", height: "200px"},400);
    },function() {
        $(this).stop().animate({backgroundColor : "black", color: "red"},400);
    });

But it doesn't seem to be rotating it at all, I realize the proper way to set the css is:

-webkit-transform: rotate(30deg);

I've tried this:

$(this).stop().animate({-webkit-transform: "rotate(-90deg)", height: "200px"},400);

but then even the Height doesn't change. any advice would help thanks!

Link to the JSFiddle

Answer 1

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.