材料设计图标 css 旋转未居中答案

【问题标题】：Material design icons css rotation is not centered材料设计图标 css 旋转未居中
【发布时间】：2018-09-06 07:53:57
【问题描述】：

我正在尝试使用来自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，因此应该没有问题。旋转时尺寸会发生变化，但我想这是正确的？

【问题讨论】：

标签： css css-animations rotatetransform google-material-icons

【解决方案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;
}

【讨论】：

【解决方案2】：

现在是 2021 年，请使用mdi-spin

例子：

mdi mdi-loading mdi-spin

【讨论】：