css - 材料设计图标 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
• 我在stackoverflow上找到的不同样式，例如transform-origin: center center;

图标本身具有相同的功能x，y dimensions因此应该不是问题。旋转时尺寸会发生变化，但我想这是正确的？

Answer 1

看看 Gabriele Petrioli 在此线程中的回答：https ://stackoverflow.com/a/14859567/1374439 ，了解如何使用 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