can't rotate png image around it's center

[deanpien 1 Likes (Newbie)]

The codepen shows what I am trying to do. A pretty simple action. However, when I try do the same with a png image it doesn't turn around it's center. It turns around a center outside of the image. How can the center be placed inside the png? Thanks in advance.

See the Pen ZYyOEj by anon (@anon) on CodePen

[GreenSock 18,254 Likes (Superhero)]

I didn't see the png image in your codepen. Did I miss something? Can you show us the problematic version, not the one that works the way you expect? Thanks a bunch. 

 

It sounds like a box model issue, like you've got your img set to position:absolute and you're trying to rotate the container which collapsed or something unrelated to GSAP. Are you animating the actual <img> element? And has the image fully loaded when you start animating? 

[deanpien 1 Likes (Newbie)]

The png in my project is wrapped inside a div, inside an li tag. The li tag has the css property "display: block; " I have not had a problem animating the other div's inside the same li tag, but trying to rotate this div around it's center is giving a problem. The image has fully loaded when I start animating.

[Diaco 1,995 Likes (Superhero)]

Hi deanpien 

 

If i understand your question correctly , pls check this out  : 

See the Pen GgEjrd by MAW (@MAW) on CodePen

[deanpien 1 Likes (Newbie)]

Thanks a lot, that solved my issue. I was rotating the div in which the image was wrapped, instead of rotating the image itself.