材质设计图标css旋转未居中

我正在尝试制作一个带有图标的加载尖晶石，但是图标不仅仅是旋转的，它还稍微从中心移动。

我有以下几种风格：

@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;
}

它是

元素。因此，它在之前添加了图标内容。 此元素位于绝对位置的包装器中，水平和垂直居中，显示为

display:flex

问题是当图标旋转时，它不会围绕其中心旋转。轴心移动了一点。图标不会停留在一个居中位置，而是轻微移动

我试过：

• 为

  i

  元素指定宽度和高度
• 为

  ：在
  元素之前提供宽度和高度

• 将

  spiner

  动画从

  i

  移动到

  ：之前

• 我在stackoverflow上发现了不同的样式，例如，

  transformorigin:center

---

图标本身具有相同的

x

和

y维度

，因此它不应该是一个问题。当它旋转时，尺寸会改变，但我想这是正确的？

看看Gabriele Petrioli在这篇文章中的回答：关于如何使用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;
}

---

看看Gabriele Petrioli在这篇文章中的回答：关于如何使用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;
}

---

现在是2021年，请使用

mdi spin

例如：

mdi mdi-loading mdi-spin

---

现在是2021年，请使用

mdi spin

例如：

mdi mdi-loading mdi-spin