logo标签列表

如何实现 transform: rotate(Xdeg) 动画效果？

javascriptjqueryhtmlcss
3

能否对 transform: rotate(Xdeg); 进行动画效果呢？

例如，我有一个id为“awesomeDiv”的div，并尝试在悬停时旋转它。

它应该从-24度旋转到0度，并在鼠标移出时再从0度旋转回-24度。

我已经尝试了以下方法：

$("#awesomeDiv").hover(
   function()
   {
      $(this).animate({
        transform : "rotate(0deg)"
      });
   },
   function()
   {
      $(this).animate({
        transform: "rotate(-24deg)"
      });
   }
);
div#awesomeDiv {
   position: absolute;
   background-color: #D8D8D8;
   width: 200px;
   height: 200px;
   transform: rotate(-24deg);
  
   margin-left:30px;
   margin-top: 30px;
   background-image: url("http://ih0.redbubble.net/image.218467778.5415/fc,220x200,white.u2.jpg");
}

div#centerMe {
   position: relative;
   margin-top: 92px;
   color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="awesomeDiv">
  <div id="centerMe">
     <center>Im Aw<span style="color:black">es</span>ome!</center>
  </div>
</div>

1
我知道你特别提到了jQuery，但为什么不使用纯CSS过渡来实现呢？ - Harry
我对任何解决方案都持开放态度。 - Black
1
好的，所以您想在悬停时从-24度旋转到0度，然后在悬停结束时反向旋转？ - Harry
是的，完全正确。这就是我试图实现的目标。 - Black
哦，我对问题的编辑感到困惑，因为两者都说从-24度到0度（鼠标进入和退出）。这正确吗？ - Harry
抱歉，Harry，这是个错误。我已经纠正了它。 - Black
6个回答
4
你可以使用简单的CSS过渡来实现这一点，就像下面的代码片段中所示。只需在 div#awesomeDiv 上设置 transition 属性，然后在 :hover 状态下添加 transform: rotate(0deg)。
在 transition 属性中，你还可以指定移动应该发生的持续时间、时机函数（如 ease、ease-in、ease-out 等）以及任何延迟。 

div#awesomeDiv {
   position: absolute;
   background-color: #D8D8D8;
   width: 200px;
   height: 200px;
   transform: rotate(-24deg);
  
   margin-left:30px;
   margin-top: 30px;
   background-image: url("http://ih0.redbubble.net/image.218467778.5415/fc,220x200,white.u2.jpg");
  transition: transform 1s ease;
}

div#centerMe {
   position: relative;
   margin-top: 92px;
   color: white;
}
div#awesomeDiv:hover{
  transform: rotate(0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="awesomeDiv">
  <div id="centerMe">
     <center>Im Awesome!</center>
  </div>
</div>

1

我建议仅使用Javascript和jQuery来修改CSS，因为CSS可以轻松执行此任务（这样可以使其可重复使用，并使您的jQuery更加清晰）。以下是示例代码：

/* jQuery 1.9.1 */
$(function() {
    $('#awesomeDiv').mouseover(function() {
    $(this).addClass('awesomeDiv-rotated');
  });

  $('#awesomeDiv').mouseleave(function() {
    $(this).removeClass('awesomeDiv-rotated');
  });
});
.awesomeDiv {
  height : 100px;
  width : 100px;
  background-color : lightgrey;
  transition : all .25s;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
}

.awesomeDiv-rotated {
  -webkit-transform: rotate(-24deg);
      -ms-transform: rotate(-24deg);
          transform: rotate(-24deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="awesomeDiv" class="awesomeDiv">
</div>

JSFiddle

编辑

你可能只想使用CSS来执行这样一个简单的任务。这是可能的，以下是如何实现（仅使用CSS）：

#awesomeDiv {
  height : 100px;
  width : 100px;
  background-color : lightgrey;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  transition : all .25s ease-in-out;
}

#awesomeDiv:hover {
  -webkit-transform: rotate(-24deg);
      -ms-transform: rotate(-24deg);
          transform: rotate(-24deg);
}
<div id="awesomeDiv">
</div>

1

这是使用CSS过渡和变换的方式（你在评论中说你对任何解决方案都持开放态度，所以采用更加自然的方式）

#awesomeDiv {
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}

#awesomeDiv:hover {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

div#awesomeDiv {
   position: absolute;
   background-color: #D8D8D8;
   width: 200px;
   height: 200px;
   transform: rotate(-24deg);
  
   margin-left:30px;
   margin-top: 30px;
   background-image: url("http://ih0.redbubble.net/image.218467778.5415/fc,220x200,white.u2.jpg");
}

div#centerMe {
   position: relative;
   margin-top: 92px;
   color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="awesomeDiv">
  <div id="centerMe">
     <center>Im Aw<span style="color:black">es</span>ome!</center>
  </div>
</div>

1

jQuery的animate仅适用于数字值。

.animate()方法允许我们在任何数字CSS属性上创建动画效果。唯一必需的参数是一个CSS属性的普通对象。该对象类似于可以发送到.css()方法的对象，只是属性范围更为严格。 所有动画属性都应该被动画到单个数字值，除非如下所述; 大多数非数字属性不能使用基本的jQuery功能进行动画处理。

因此，只需使用jquery的css()来使用transform而不是animate。

$("#awesomeDiv").hover(
   function()
   {
      $(this).css({
        transform : "rotate(0deg)"
      });
   },
   function()
   {
      $(this).css({
        transform: "rotate(-24deg)"
      });
   }
);
div#awesomeDiv {
   position: absolute;
   background-color: #D8D8D8;
   width: 200px;
   height: 200px;
   transform: rotate(-24deg);
  
   margin-left:30px;
   margin-top: 30px;
   background-image: url("http://ih0.redbubble.net/image.218467778.5415/fc,220x200,white.u2.jpg");
}

div#centerMe {
   position: relative;
   margin-top: 92px;
   color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="awesomeDiv">
  <div id="centerMe">
     <center>Im Awesome!</center>
  </div>
</div>

1
您可以使用step的动画属性，就像这样。
var awesomeDiv = $('#awesomeDiv');

$({rotation: 0}).animate({rotation: 360}, {
    duration: 2000,
    easing: 'linear',
    step: function () {
        awesomeDiv.css({transform: 'rotate(' + this.rotation + 'deg)'});
        console.log(this.rotation);
    }
});

JSBin中的演示

对于这么简单的东西，我会使用CSS过渡或动画。

太棒了！谢谢。 - Black
1
我认为简单的方法是使用如下的CSS代码：

div#awesomeDiv {
   position: absolute;
   background-color: #D8D8D8;
   width: 200px;
   height: 200px;
   transform: rotate(-24deg);
   transition: transform 1s;


   margin-left:30px;
   margin-top: 30px;
   background-image: url("http://ih0.redbubble.net/image.218467778.5415/fc,220x200,white.u2.jpg");
}

div#awesomeDiv:hover {
  transform: rotate(0);
}

div#centerMe {
   position: relative;
   margin-top: 92px;
   color: white;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接