Question 66387 in CSS Question posted in
Some basic documentation can be found here.

Element rotating off-center – Css

I want to rotate the refresh icon from mdi with transform rotate. Due to the arrow head, the graphic unfortunately does not have its center at the center of the circle which makes the rotation animation a bit wobbly.

Is there any way to fix this with CSS?

If the icon is static, I can fix it by adding a little offset with margin or transform translate. But both are relative to the coordinate system of the page, so this does not fix the wobbling when the graphic is being animated as the offset does not rotate with the graphic.

Is there any directive that allows me to move the graphic relative to its own coordinate system so that the offset rotates with the graphic?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This is the solution I came up with:

    Put a div as a container around the icon element. Use padding to align the icon within the container so that the center of the circle is the center of the container. Then rotate the container.


  2. 0

    The transform-origin values don’t have to be "center", "left" or whatever words, but can also be defined in percentage or pixel values, which allows any offset you need. (https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search