2

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この要素は、水平方向と垂直方向の中央に配置された、絶対位置のラッパーに配置されます。

問題は、アイコンが回転するときに、その中心を中心に回転しないことです。軸が少し動きます。アイコンは中央の 1 つの位置にとどまらず、わずかに移動します。

アイコンは回転するだけでなく、動きます

私はもう試した：

  • i要素に幅と高さを与える
  • :before要素に幅と高さを与える
  • spinerアニメーションを からiに移動:before
  • たとえば、stackoverflow で見つけたさまざまなスタイルtransform-origin: center center;

アイコン自体は同じxなy dimensionsので問題ないはずです。回転させると寸法が変わるのですが、それでいいのでしょうか？

4

2 に答える 2