Rotate element by its center

Design help Animations & Interactions
1

Hi Webflowers,

I’m pretty sure I’m missing something here, so I’d love to get your help.

I want to create a show-on-click text, and there’s just one thing I’m stuck with:
My plus icon, which I use to show the text - I want it to rotate by its center when pressed, exactly like the button in the Webflow interactions examples page (https://webflow.com/interactions-animations.

But when i set a rotate interaction around the z-axis, it rotates around its left corner, and not around itself. I want it to stay in the exact same place, but just rotate. How do I do that?

Thanks

Here is my public share link: LINK
(how to access public share link)

2

Set the rotation on the parent if it’s not an svg or png. Or just create the plus sign in graphics program, insert it as an image. When you test the rotation it will turn on it’s own axis and stay centered.

3

Sorry but I didn’t quite get it.

Setting the rotation on the parent didn’t work, and the icon is already inserted as an image…

anything else I can do?

4

Hey post your read-only link and the community can take a look for ya.

5

forget about it it was my bad.

the icon I inserted wasn’t square so it made a mess.

Thanks for the help anyway

6

Okay no problem. Have fun.