在jQuery中转换 [英] Transform in jQuery

问题描述

我想使用jquery获取一个元素来旋转鼠标悬停效果，我有这个 jsFiddle 去测试。到目前为止我有这个：

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

但它似乎没有旋转它，我意识到正确的方式设置css is：

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

-webkit-transform: rotate(30deg);

/ p>

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!

链接到JSFiddle

推荐答案

使用优秀的jQuery Rotate插件。 http://code.google.com/p/jqueryrotate/ 。

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 

要旋转图片，您所需要做的只是 $（'＃myImage'）。rotate（30）// for a 30 degrees rotation
其中 #myImage 要旋转的元素的ID。

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.

要旋转动画，可以使用setTmeout ex：

To animate rotation, you can use setTmeout ex:

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

这篇关于在jQuery中转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！