在jQuery中转换

Question

我正在尝试使用jquery获取一个元素来设置旋转悬停效果,我有这个jsFiddle来测试.到目前为止我有这个:

$(".icon").hover(function() {
        $(this).stop().animate({transform: "rotate(-90deg)", height: "200px"},400);
    },function() {
        $(this).stop().animate({backgroundColor : "black", color: "red"},400);
    });

但它似乎根本没有旋转它,我意识到设置css的正确方法是:

-webkit-transform:rotate(30deg);

我试过这个:

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

但即使是高度也不会改变.任何建议都会有所帮助!

链接到JSFiddle

Answer 1

除了IE9之外,所有支持转换的浏览器也支持转换,所以如果没有JS,你最好不要这样做:

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

示例:http://jsfiddle.net/9CYET/14/

(我知道这不是你想要的所有属性,但是你明白了!如果你想改变高度,你需要将变换原点设置到正确的位置).

在没有动画的情况下旋转的IE9,在旧版浏览器中不会发生任何事情.您可以使用IE的过滤器来破解真正的旧IE中的旋转.

Answer 2

使用优秀的 jQuery Rotate 插件。http://code.google.com/p/jqueryrotate/。所有主流浏览器都支持它

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

要旋转图像，您需要做的就是要旋转的元素的 id 位于$('#myImage').rotate(30) //for a 30 degree rotation 哪里。#myImage

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

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