如何使用jquery旋转图像的一侧

时间:2014-07-23 13:44:15

标签: javascript jquery html tweenmax

我试图只旋转图像一个角。图像就像一个杆。底部不应该改变位置只有图像的顶部应该是顺时针或逆时针的动画。我试过这样。我应该在IE8中也工作。我做了left:53px,因为底部不应该改变位置。

<style>
    .big-pole{
      background-image: url("images/pole.png");
      width: 55px;
      height: 100px;
      position: absolute;
      top: 78px;
      left: 53px;
    }
</style>
<script>
     TweenMax.to(".big-pole",3,{
        top:'100px',
        left:'53px',
       });

</script>

2 个答案:

答案 0 :(得分:3)

您可以将CSS类应用于图像而无需任何外部库。

.rotated {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg); /* IE 9 */
  -moz-transform: rotate(90deg); /* Firefox */
  -webkit-transform: rotate(90deg); /* Safari and Chrome */
  -o-transform: rotate(90deg); /* Opera */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* IE 8*/
}

答案 1 :(得分:0)

我不确定我是否理解你正在寻找什么样的轮换?就像其他用户指出的时钟一样吗?无论如何,你的TweenMax调用缺少一些参数,以便轮换工作。

TweenMax.to($(".big-pole"), 3, {rotation:-90, transformOrigin:"top center"});

您将测试一些内容并更改一些值以找到正确的动画,因为我可能会出错,这完全取决于您最终想要做什么。