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

Solution 1

Use the excellent jQuery Rotate plugin. http://code.google.com/p/jqueryrotate/. It is supported by all major browsers

* Internet Explorer 6.0 >
* Firefox 2.0 >
* Safari 3 >
* Opera 9 >
* Google Chrome 

To rotate an image, All you need to do is $('#myImage').rotate(30) //for a 30 degree rotation Where #myImage is the id of the element you want rotated.

To animate rotation, you can use setTmeout ex:

setTimeout(function() { $('#myImage').rotate(30) },5)

Solution 2

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.

Solution 3

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.

Solution 4

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.

Solution 5

If you want to animate something in css, you just have to set "transitionDuration" css property(no need for jQuery.animate), for example:

var style = element.style;

style.webkitTransitionDuration = style.MozTransitionDuration = style.msTransitionDuration = style.OTransitionDuration = style.transitionDuration = '500ms';
style.MozTransform = style.webkitTransform = 'translate3d(100px,0,0)';
style.msTransform = style.OTransform = 'translateX(100px)';

However this will work only in modern browsers, so you have to use jQuery.animate as fallback.

Here is jQuery plugin which handling this:

https://github.com/benbarnett/jQuery-Animate-Enhanced

It just overrides jQuery.animate function to use css animation if available, so you don't have to worry about cross browser issues, just call jQuery.animate and the best available method will be called.

View more solutions

Comments

[Justin808]

jQuery-UI adds support for animating colors.

[UpTheCreek]

Be aware of what this is doing though - it will use css3 transform when possible, otherwise will revert to either canvas or VML.

[Andrew Prock]

While this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference.

[Ani]

@Paul Roub ... Thank you for suggesting the edits. I have modified the answer. I hope this much explanation is sufficient.