Question

是否可以为transform: rotate(Xdeg);制作动画？

e.g。我有一个div ID和＃34; awesomeDiv＆＃34;并尝试在悬停时设置旋转动画。

如果鼠标熄灭，它应该在悬停时从-24deg动态显示0deg并再次从0deg返回-24deg。

我试过这样的话：

＆＃13;

$("#awesomeDiv").hover(
   function()
   {
      $(this).animate({
        transform : "rotate(0deg)"
      });
   },
   function()
   {
      $(this).animate({
        transform: "rotate(-24deg)"
      });
   }
);

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您可以使用简单的CSS过渡本身，如下面的代码段所示。只需在transition上设置div#awesomeDiv属性，然后将transform: rotate(0deg)添加到:hover状态。

在transition属性中，您还可以指定移动应该发生的持续时间，计时功能（如轻松，轻松，缓出等）和任何延迟。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用step的animate属性，就像这样。

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

Demo in JSBin

对于这么简单的事情，我会选择使用CSS过渡或动画。

Answer 3

我建议仅使用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>

Answer 4

这里是CSS转换和转换（你在评论中说你对任何解决方案都是开放的，所以采用更自然的方式）

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 5

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>

Answer 6

我认为简单的方法是使用这样的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;
}

如何设置变换动画：rotate（Xdeg）;

6 个答案: