在悬停图像上旋转45度

Question

悬停时，我试图将图像旋转45度（实际上我真的想使其来回摆动）。 我尝试使用CSS进行旋转变换，但没有运气。 有没有人有任何想法（也许是jQuery，javascript）？

  a:hover{
            behavior:url(-ms-transform.htc);
            /* Firefox */
            -moz-transform:rotate(45deg);
            /* Safari and Chrome */
            -webkit-transform:rotate(45deg);
            /* Opera */
            -o-transform:rotate(45deg);
            /* IE9 */
            -ms-transform:rotate(45deg);
            /* IE6,IE7 */}

 <div id="main">
    <span class="box"><a href=""><img src="blog-icon.png"></img></a></span>
 </div>

Answer 1

您似乎将悬停设置为锚点而不是图像 ..

代替

a:hover{

应该

img:hover{

检查小提琴

Answer 2

在Webkit浏览器中，内联元素上的transform被忽略。

要进行此工作，您需要添加a { display:block; } a { display:block; }到您的CSS。 （内联块也可以使用）

演示： http ： //jsfiddle.net/6Df6W/

Answer 3

尝试这个：

$("a img").rotate({ 
   bind: 
     { 
        mouseover : function() { 
            $(this).rotate({animateTo:45})
        },
        mouseout : function() { 
            $(this).rotate({animateTo:0})
        }
     } 

});​

Answer 4

我已经使用了几次，并且效果很好：

http://code.google.com/p/jqueryrotate/

$(".box a img").rotate(45);