Question

我正在努力使图像旋转，我的控制台告诉我，我的javascripts没有错误，但鼠标悬停时图像不会旋转。以下是文件内容：

<{1>}

下的

myjavascripts.js

并在我的$("#image").rotate({ bind: { mouseover : function() { $(this).rotate({animateTo:180}) }, mouseout : function() { $(this).rotate({animateTo:0}) } } });

下

index.erb

Answer 1

您需要将代码保存在文档中，因为必须在事件进行注册之前将图像加载到页面上。 $(function(){})喜欢这样：

 $(function(){
   $("#image").rotate({ 
   bind: 
  { 
    mouseover : function() { 
        $(this).rotate({animateTo:180})
    },
    mouseout : function() { 
        $(this).rotate({animateTo:0})
    }
   } 

  });
  });

<强> DEMO

Answer 2

为什么使用jquery可以用一些CSS3来完成

CSS

.rotate{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;

-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;

overflow:hidden;

}

并在悬停时使用此

.rotate:hover  
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}

然后只需将“旋转”类附加到任何图像或文本上即可360度旋转。

来源：http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html

Answer 3

.rotate img {
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}

.rotate img:hover {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
 }

DEMO Growth pages

尝试使用jquery旋转图像

3 个答案: