CODEWITHSUNDEEP
javascriptjqueryhtmlgsap
Dileep
Dileep

Reputation: 515

how to Rotate image one side using jquery

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>

Upvotes: 0

Views: 578

Answers (2)

IndieRok
IndieRok

Reputation: 1788

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.

Upvotes: 0

Matas Vaitkevicius
Matas Vaitkevicius

Reputation: 61489

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

Upvotes: 3

Related Questions