Материал дизайн иконки css вращение не по центру

Question

Я пытаюсь сделать загрузочный вертел со значком с https://materialdesignicons.com/ но значок не только вращается, но и слегка смещается от центра.

У меня есть эти стили:

@keyframes spin-animation {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.spin:before {
  display: block;
  transform-origin: center center;
  -webkit-backface-visibility: hidden;
  -webkit-animation: spin-animation 2s linear infinite;
  animation: spin-animation 2s linear infinite;
}

Это <i class="mdi mdi-something spin"> элемент. Так что добавил :before с содержанием иконы. Этот элемент находится в абсолютно позиционированной обертке, с display: flexгоризонтально и вертикально по центру.

Проблема в том, что когда значок вращается, он не вращается вокруг своего центра. Ось немного сдвигается. Значок не остается в одной центрированной позиции, он слегка перемещается.

Я пробовал:

• Давать ширину и высоту i элемент
• Давать ширину и высоту :before элемент
• Перемещение spiner анимация от i в :before
• Различные стили, которые я нашел в stackru, например transform-origin: center center;

Сам значок имеет такой же x а также y dimensions так что это не должно быть проблемой. Размеры меняются, когда он вращается, но я думаю, это правильно?

Answer 1

Посмотрите ответ Габриэле Петриоли в этой теме: /questions/8798731/css3-spin-animation/8798758#8798758 о том, как реализовать вращение с помощью CSS3.

Исходя из его предположения, нижеследующее отлично сработало для меня.

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.spin {
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

Answer 2

Сейчас 2021 год, пользуйтесь mdi-spin

Пример:

      mdi mdi-loading mdi-spin