如何使用jQuery旋转图像一侧

Question

I am trying to rotate a image only one corner.image is like a pole .bottom side should not be changed the position only top of the image should be animate either clockwise or anti clockwise.i have tried like this.i should work in IE8 also.i made left:53px because bottom should not be change the position.

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

Answer 1

You could apply CSS class to image without any need of external libraries.

.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*/
}

Answer 2

I'm not really sure if I understand correctly what kind of rotation you are looking for? Is it like a clock as other users pointed out? Anyway your TweenMax call was missing some parameters in order for the rotation to work.

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

You will have test a few things and change a few value to find the correct animation, cause I might be wrong a bit, all depending on what you want to do in the end.