2

当我将鼠标悬停在上面时，我正在尝试将图像旋转 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>
4

4 回答 4

4

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

代替

a:hover{

应该

img:hover{

检查小提琴

于 2012-11-15T07:19:41.567 回答
1

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

要完成这项工作，您需要添加a { display:block; }到您的 CSS 中。（内联块也可以）

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

于 2012-11-15T07:23:01.593 回答
0

我已经多次使用它并且效果很好：

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

$(".box a img").rotate(45);
于 2012-11-15T07:28:50.517 回答
0

尝试这个：

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

});​
于 2012-11-15T07:27:54.143 回答