Transform in jQuery

问题:

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

回答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)

回答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.

回答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.

回答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.

回答5:

jQuery animate doesn't support rotation (see http://bugs.jquery.com/ticket/4171 and the jQuery documentation)

Also, only CSS with numerical values are supported for animate, meaning animating colors won't work either. Oops, was not aware jQuery UI added support for colors.

回答6:

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.

回答7:

I used this for scale:

var zoom_level = .4,
    multiplier = .2;
$('button.zoom-in, button.zoom-out').click(function(){
    zoom_level += $(this).hasClass('zoom-in') ? multiplier : -(multiplier);

    $('.floor').css({
        '-webkit-transform': 'scale(' + zoom_level + ')'
    });
});

回答8:

If you're using jquery, jquery.transit is very simple and powerful lib that allows you to make your transformation while handling cross-browser compability for you. It can be as simple as this : $("#element").transition({x:'90px'}). Take it from this link : http://ricostacruz.com/jquery.transit/

回答9:

jquery.transform.js is a jquery 2d transform plugin developed by Louis remi. it allows to use transform like css in jquery. visit this link for some illustrations on how to use it. A simple illustration to rotate an element using this plugin is as follows:

$(elem).animate({transform: 'rotate(135deg)'});